Fixes: remove default chevron in Safari for Forms trash (#1101)

* Set cursor to pointer for the Form trash heading * Align the heading items to middle * Add space between chevron and trash icon * Reduce the size of chevron
getodk · Dec 13, 2024 · c05df00 · c05df00
1 parent e82c391
commit c05df00
Showing 1 changed file with 44 additions and 34 deletions.
diff --git a/src/components/form/trash-list.vue b/src/components/form/trash-list.vue
@@ -102,44 +102,54 @@ export default {
 
 <style lang="scss">
 @import '../../assets/scss/mixins';
-
-#form-trash-list-header {
-  display: flex;
-  align-items: baseline;
-
-  #form-trash-expander {
-    // Fixate the width as icon-chevron-down and icon-chevron-right have unequal width :-(
-    display: inline-block;
-    width: 1em;
-  }
-
-  .icon-trash {
-    padding-right: 8px;
-  }
-
-  .trash-count {
-    font-weight: normal;
-    color: black;
+#form-trash-list {
+  #form-trash-list-header {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    #form-trash-expander {
+      // Fixate the width as icon-chevron-down and icon-chevron-right have unequal width :-(
+      display: inline-block;
+      width: 1em;
+      margin-right: 15px;
+      font-size: 12px;
+    }
+
+    .icon-trash {
+      padding-right: 8px;
+    }
+
+    .trash-count {
+      font-weight: normal;
+      color: black;
+    }
+
+    #form-trash-list-title {
+      font-size: 26px;
+      font-weight: 700;
+      color: $color-danger;
+      display: flex;
+      align-items: center;
+    }
+
+    #form-trash-list-count {
+      font-size: 20px;
+      color: #888;
+      padding-left: 4px;
+    }
+
+    #form-trash-list-note {
+      margin-left: auto;
+      color: #888
+    }
   }
 
-  #form-trash-list-title {
-    font-size: 26px;
-    font-weight: 700;
-    color: $color-danger;
-  }
-
-  #form-trash-list-count {
-    font-size: 20px;
-    color: #888;
-    padding-left: 4px;
-  }
-
-  #form-trash-list-note {
-    margin-left: auto;
-    color: #888
+  // Hides default chevron in safari
+  summary::-webkit-details-marker {
+    display: none;
   }
 }
-
 </style>
 
 <i18n lang="json5">