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>