2 files changed, 9 insertions, 8 deletions
diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index b6880445..4f54d6a3 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -38,17 +38,14 @@ const SettingsModal = {
     }
   },
   watch: {
+    // This is the only way to access the <html> element.
     modalActivated (newValue) {
+      let html = document.querySelector('html')
+      if (!html) return
       if (newValue) {
-        let html = document.querySelector('html')
-        if (html) {
-          html.classList.add('settings-modal-layout')
-        }
+        html.classList.add('settings-modal-layout')
       } else {
-        let html = document.querySelector('html')
-        if (html) {
-          html.classList.remove('settings-modal-layout')
-        }
+        html.classList.remove('settings-modal-layout')
       }
     }
   }
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index e7f4d3d3..f32db4bd 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -14,6 +14,10 @@
        * - 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) {
+        transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 100px));
+      }
     }
   }