1 files changed, 28 insertions, 23 deletions
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 13cb0e65..f5861229 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -1,4 +1,5 @@
-@import 'src/_variables.scss';
+@import "src/variables";
+
 .settings-modal {
   overflow: hidden;
 
@@ -6,32 +7,13 @@
   .option-list {
     list-style-type: none;
     padding-left: 2em;
+
     li {
       margin-bottom: 0.5em;
     }
-    .suboptions {
-      margin-top: 0.3em
-    }
-  }
-
-  &.peek {
-    .settings-modal-panel {
-      /* Explanation:
-       * Modal is positioned vertically centered.
-       * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
-       * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
-       * + 100% - we move modal completely off-screen, it's top boundary touches
-       *   bottom of the screen
-       * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
-       */
-      transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
 
-      @media all and (max-width: 800px) {
-        /* For mobile, the modal takes 100% of the available screen.
-           This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible.
-        */
-        transform: translateY(calc(100% - 50px));
-      }
+    .suboptions {
+      margin-top: 0.3em;
     }
   }
 
@@ -63,6 +45,7 @@
 
   .settings-footer {
     display: flex;
+
     >* {
       margin-right: 0.5em;
     }
@@ -72,4 +55,26 @@
       flex-grow: 1;
     }
   }
+
+  &.peek {
+    .settings-modal-panel {
+      /* Explanation:
+       * Modal is positioned vertically centered.
+       * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
+       * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
+       * + 100% - we move modal completely off-screen, it's top boundary touches
+       *   bottom of the screen
+       * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
+       */
+      transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
+
+      @media all and (max-width: 800px) {
+        /* For mobile, the modal takes 100% of the available screen.
+           This ensures the minimized modal is always 50px above the browser bottom
+           bar regardless of whether or not it is visible.
+        */
+        transform: translateY(calc(100% - 50px));
+      }
+    }
+  }
 }