Fix mobile setting modal behavior: ensure the mobile browser address bar doesn't overlap the modal top panel.

2 files changed, 17 insertions, 1 deletions

diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index f0d49c91..b6880445 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -36,6 +36,21 @@ const SettingsModal = {
     modalPeeked () {
       return this.$store.state.interface.settingsModalState === 'minimized'
     }
+  },
+  watch: {
+    modalActivated (newValue) {
+      if (newValue) {
+        let html = document.querySelector('html')
+        if (html) {
+          html.classList.add('settings-modal-layout')
+        }
+      } else {
+        let html = document.querySelector('html')
+        if (html) {
+          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 0da4d9a8..e7f4d3d3 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -1,6 +1,7 @@
 @import 'src/_variables.scss';
 .settings-modal {
   overflow: hidden;
+  height: 100%;
 
   &.peek {
     .settings-modal-panel {
@@ -27,7 +28,7 @@
 
     @media all and (max-width: 800px) {
       max-width: 100vw;
-      height: 100vh;
+      height: 100%;
     }
 
     >.panel-body {