improve checkbox / settings modal styles

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 {