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

3 files changed, 33 insertions, 1 deletions

diff --git a/src/App.scss b/src/App.scss
index e2e2d079..21c00bac 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -943,6 +943,22 @@ nav {
   line-height: 1.3rem;
 }
 
+.settings-modal-layout {
+  @media all and (max-width: 800px) {
+    height: 100%;
+
+    body {
+      height: 100vh;
+      overflow-y: hidden;
+      position: fixed;
+    }
+
+    #app {
+      height: 100%;
+    }
+  }
+}
+
 .chat-layout {
   // Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens).
   overflow: hidden;
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 {