From 52244147d8f1beb53c2b11e31e01c5103ddfa05b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 6 May 2026 09:23:12 +0300
Subject: [PATCH] improve checkbox / settings modal styles

---
 src/components/checkbox/checkbox.vue          | 16 +++------
 .../settings_modal/helpers/help_indicator.vue |  1 -
 .../helpers/local_setting_indicator.vue       |  1 -
 .../helpers/modified_indicator.vue            |  1 -
 .../settings_modal/settings_modal.scss        | 33 +++++++++++++++----
 5 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index cbe3dd80f..4a3ea49bc 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/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>
diff --git a/src/components/settings_modal/helpers/help_indicator.vue b/src/components/settings_modal/helpers/help_indicator.vue
index add6ab753..f1007883a 100644
--- a/src/components/settings_modal/helpers/help_indicator.vue
+++ b/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>
diff --git a/src/components/settings_modal/helpers/local_setting_indicator.vue b/src/components/settings_modal/helpers/local_setting_indicator.vue
index e22e36fb2..0082f186d 100644
--- a/src/components/settings_modal/helpers/local_setting_indicator.vue
+++ b/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')"
diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
index c723dfe19..ea71936da 100644
--- a/src/components/settings_modal/helpers/modified_indicator.vue
+++ b/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"
         />
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 371498a96..1e93f9271 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/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 {