From 77d65d6cecfae1bdbf5e5b7d8c882d39846b91f1 Mon Sep 17 00:00:00 2001
From: eugenijm <eugenijm@protonmail.com>
Date: Thu, 23 Jul 2020 12:20:48 +0300
Subject: [PATCH] Ensures the minimized modal is always 50px above the mobile
 browser bottom bar regardless of whether or not it is visible.

---
 src/components/settings_modal/settings_modal.scss | 3 +++
 src/components/tab_switcher/tab_switcher.js       | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index cdb32fd7..90446b36 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -15,6 +15,9 @@
       transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
 
       @media all and (max-width: 800px) {
+        /* For mobile, the modal takes 100% of the available screen.
+           This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible.
+        */
         transform: translateY(calc(100% - 50px));
       }
     }
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 19206610..40b5b3ca 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -46,7 +46,7 @@ export default Vue.component('tab-switcher', {
         return this.active
       }
     },
-    bodyLocked () {
+    settingsModalVisible () {
       return this.settingsModalState === 'visible'
     },
     ...mapState({
@@ -141,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={this.bodyLocked}>
+        <div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock={this.settingsModalVisible}>
           {contents}
         </div>
       </div>