4 files changed, 10 insertions, 33 deletions
diff --git a/src/App.scss b/src/App.scss
index 336c4998..e2e2d079 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -943,23 +943,6 @@ nav {
   line-height: 1.3rem;
 }
 
-.settings-modal-layout {
-  @media all and (max-width: 800px) {
-    height: 100%;
-
-    body {
-      height: 100vh;
-      width: 100%;
-      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 4f54d6a3..f0d49c91 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -36,18 +36,6 @@ const SettingsModal = {
     modalPeeked () {
       return this.$store.state.interface.settingsModalState === 'minimized'
     }
-  },
-  watch: {
-    // This is the only way to access the <html> element.
-    modalActivated (newValue) {
-      let html = document.querySelector('html')
-      if (!html) return
-      if (newValue) {
-        html.classList.add('settings-modal-layout')
-      } else {
-        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 f32db4bd..cdb32fd7 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -1,7 +1,6 @@
 @import 'src/_variables.scss';
 .settings-modal {
   overflow: hidden;
-  height: 100%;
 
   &.peek {
     .settings-modal-panel {
@@ -16,7 +15,7 @@
       transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
 
       @media all and (max-width: 800px) {
-        transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 100px));
+        transform: translateY(calc(100% - 50px));
       }
     }
   }
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 919eb7cd..19206610 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { mapState } from 'vuex'
 
 import './tab_switcher.scss'
 
@@ -44,7 +45,13 @@ export default Vue.component('tab-switcher', {
       } else {
         return this.active
       }
-    }
+    },
+    bodyLocked () {
+      return this.settingsModalState === 'visible'
+    },
+    ...mapState({
+      settingsModalState: state => state.interface.settingsModalState
+    })
   },
   beforeUpdate () {
     const currentSlot = this.$slots.default[this.active]
@@ -134,7 +141,7 @@ export default Vue.component('tab-switcher', {
         <div class="tabs">
           {tabs}
         </div>
-        <div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock>
+        <div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock={this.bodyLocked}>
           {contents}
         </div>
       </div>