improve checkbox / settings modal styles

src/components/checkbox/checkbox.vue

@@ -61,12 +61,14 @@ export default {
 <style lang="scss">
 .checkbox {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   min-height: 1.2em;
+  align-items: baseline;
+  gap: 0 0.5em;
 
   &-indicator,
   & .label {
-    vertical-align: middle;
+    align-self: center;
   }
 
   & > &-indicator {
@@ -138,15 +140,5 @@ export default {
       content: "–";
     }
   }
-
-  & > .label {
-    &.-after {
-      margin-left: 0.5em;
-    }
-
-    &.-before {
-      margin-right: 0.5em;
-    }
-  }
 }
 </style>

src/components/settings_modal/helpers/help_indicator.vue

@@ -5,7 +5,6 @@
       :trigger-attrs="{ 'aria-label': $t('settings.setting_changed') }"
     >
       <template #trigger>
-        &nbsp;
         <FAIcon icon="circle-question" />
       </template>
       <template #content>

src/components/settings_modal/helpers/local_setting_indicator.vue

@@ -7,7 +7,6 @@
       trigger="hover"
     >
       <template #trigger>
-        &nbsp;
         <FAIcon
           icon="desktop"
           :aria-label="$t('settings.setting_local_side')"

src/components/settings_modal/helpers/modified_indicator.vue

@@ -8,7 +8,6 @@
       :trigger-attrs="{ 'aria-label': $t('settings.setting_changed') }"
     >
       <template #trigger>
-        &nbsp;
         <FAIcon
           icon="wrench"
         />

src/components/settings_modal/settings_modal.scss

@@ -40,10 +40,6 @@
     line-height: 1.5;
   }
 
-  .suboptions {
-    margin-left: 1em;
-  }
-
   .sidenote {
     margin-left: 5em;
     padding: 0.25em 1em;
@@ -66,6 +62,7 @@
     column-gap: 0.5em;
     align-items: baseline;
     padding: 0.5em 0;
+    line-height: 1.5em;
 
     .setting-label {
       grid-area: label;
@@ -96,6 +93,9 @@
 
         .checkbox-indicator {
           grid-area: control;
+          height: 1.5em;
+          line-height: 1.5em;
+          align-self: baseline;
         }
 
         .-mobile & {
@@ -130,6 +130,12 @@
     padding-left: 0;
     margin: 0;
 
+    &.suboptions {
+      margin-left: 2em;
+      border-top: 1px dotted var(--border);
+    }
+
+
     .btn:not(.dropdown-button) {
       padding: 0 2em;
     }
@@ -207,6 +213,12 @@
       }
     }
 
+    li {
+      .sidenote {
+        margin-left: 1em;
+      }
+    }
+
     /* stylelint-disable no-descending-specificity */
     .setting-item {
       grid-template-columns: 1fr min-content;
@@ -221,9 +233,14 @@
       .checkbox {
         .label {
           text-align: left;
-          margin-left: 0;
+          order: 2;
+        }
+
+        .checkbox-indicator {
+          order: 1;
         }
       }
+
     }
 
     ul {
@@ -236,14 +253,16 @@
       }
     }
 
-
-
     .setting-list:not(.suboptions),
     .option-list {
       &.two-column {
         grid-template-columns: 1fr;
       }
     }
+
+    .UnitSetting {
+      padding-right: 0.5em;
+    }
   }
 
   &.peek {