Merge branch 'mobile-setting-modal-fix' into 'develop'

Mobile setting modal behavior fixes

Closes #908

See merge request pleroma/pleroma-fe!1200

1 files changed, 8 insertions, 1 deletions

diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 0da4d9a8..90446b36 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -13,6 +13,13 @@
        * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
        */
       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));
+      }
     }
   }
 
@@ -27,7 +34,7 @@
 
     @media all and (max-width: 800px) {
       max-width: 100vw;
-      height: 100vh;
+      height: 100%;
     }
 
     >.panel-body {