diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index 5ce7cb4c6..a396b5dba 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -29,11 +29,12 @@ body.keyboard-visible & { position: relative; - bottom: calc(0px - env(safe-area-inset-bottom)); + bottom: 0; - // Target: Old Firefox (Waterfox Classic) - @supports not (bottom: calc(0px - env(safe-area-inset-bottom))) { - bottom: 0; + @media (max-width: 600px) { + @supports (bottom: calc(0px - env(safe-area-inset-bottom))) { + bottom: calc(0px - env(safe-area-inset-bottom)); + } } body.keyboard-visible.no-page-transitions & { @@ -99,8 +100,10 @@ .last-in-list { margin-bottom: 4.25rem; - body:not(.keyboard-visible) & { - margin-bottom: calc(4.25rem + env(safe-area-inset-bottom)); + @supports (margin-bottom: calc(4.25rem + env(safe-area-inset-bottom))) { + body:not(.keyboard-visible) & { + margin-bottom: calc(4.25rem + env(safe-area-inset-bottom)); + } } } } diff --git a/src/components/middle/MessageSelectToolbar.scss b/src/components/middle/MessageSelectToolbar.scss index 6d5b83f44..1639ee0cd 100644 --- a/src/components/middle/MessageSelectToolbar.scss +++ b/src/components/middle/MessageSelectToolbar.scss @@ -1,6 +1,6 @@ .MessageSelectToolbar { position: absolute; - bottom: calc(0.5rem + env(safe-area-inset-bottom)); + bottom: 0.5rem; left: 0.5rem; right: 0.5rem; width: auto; @@ -8,9 +8,10 @@ justify-content: center; margin: 0; - // Target: Old Firefox (Waterfox Classic) - @supports not (bottom: calc(0.5rem + env(safe-area-inset-bottom))) { - bottom: 0.5rem; + @media (max-width: 600px) { + @supports (bottom: calc(0.5rem + env(safe-area-inset-bottom))) { + bottom: calc(0.5rem + env(safe-area-inset-bottom)); + } } .mask-image-disabled &::before { diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss index 963d73106..eefcfb54e 100644 --- a/src/components/middle/MiddleColumn.scss +++ b/src/components/middle/MiddleColumn.scss @@ -188,16 +188,17 @@ } &:not(.no-composer) { - padding-bottom: env(safe-area-inset-bottom); + padding-bottom: 0; top: 0; - body.keyboard-visible & { - top: env(safe-area-inset-bottom); - } + @media (max-width: 600px) { + @supports (padding-bottom: env(safe-area-inset-bottom)) { + padding-bottom: env(safe-area-inset-bottom); - // Target: Old Firefox (Waterfox Classic) - @supports not (padding-bottom: env(safe-area-inset-bottom)) { - padding-bottom: 0; + body.keyboard-visible & { + top: env(safe-area-inset-bottom); + } + } } } @@ -329,7 +330,6 @@ padding-bottom: 0.75rem; margin-left: -0.5rem; - // Target: Old Firefox (Waterfox Classic) @supports (padding-bottom: calc(0.75rem + env(safe-area-inset-bottom))) { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); } diff --git a/src/components/middle/MobileSearch.scss b/src/components/middle/MobileSearch.scss index bf96ea1c0..75d8b5d6a 100644 --- a/src/components/middle/MobileSearch.scss +++ b/src/components/middle/MobileSearch.scss @@ -37,8 +37,17 @@ padding-right: max(0.5rem, env(safe-area-inset-right)); body:not(.keyboard-visible) & { - padding-bottom: env(safe-area-inset-bottom); - height: calc(3.5rem + env(safe-area-inset-bottom)); + padding-bottom: 0; + height: 3.5rem; + } + + @media (max-width: 600px) { + @supports (padding-bottom: env(safe-area-inset-bottom)) { + body:not(.keyboard-visible) & { + padding-bottom: env(safe-area-inset-bottom); + height: calc(3.5rem + env(safe-area-inset-bottom)); + } + } } // Target: Old Firefox (Waterfox Classic) diff --git a/src/components/middle/composer/AttachmentModal.module.scss b/src/components/middle/composer/AttachmentModal.module.scss index 123eff5c1..75efbf68e 100644 --- a/src/components/middle/composer/AttachmentModal.module.scss +++ b/src/components/middle/composer/AttachmentModal.module.scss @@ -26,10 +26,10 @@ overflow-x: auto; - padding-bottom: env(safe-area-inset-bottom); - - @supports not (padding-bottom: env(safe-area-inset-bottom)) { - padding-bottom: 0; + @media (max-width: 600px) { + @supports (padding-bottom: env(safe-area-inset-bottom)) { + padding-bottom: env(safe-area-inset-bottom); + } } } @@ -78,11 +78,12 @@ &.mobile.symbolMenuOpen :global(.modal-dialog) { transition: var(--layer-transition); + transform: translate3d(0, calc((var(--symbol-menu-height)) * -1), 0); - transform: translate3d(0, calc((var(--symbol-menu-height) - env(safe-area-inset-bottom)) * -1), 0); - - @supports not (bottom: env(safe-area-inset-bottom)) { - transform: translate3d(0, calc((var(--symbol-menu-height)) * -1), 0); + @media (max-width: 600px) { + @supports (bottom: env(safe-area-inset-bottom)) { + transform: translate3d(0, calc((var(--symbol-menu-height) - env(safe-area-inset-bottom)) * -1), 0); + } } } diff --git a/src/components/middle/composer/Composer.scss b/src/components/middle/composer/Composer.scss index a5f8984b3..f6135bd31 100644 --- a/src/components/middle/composer/Composer.scss +++ b/src/components/middle/composer/Composer.scss @@ -4,15 +4,14 @@ .select-mode-active + .middle-column-footer & { position: absolute; padding-right: 2rem; - bottom: env(safe-area-inset-bottom); - - // Target: Old Firefox (Waterfox Classic) - @supports not (bottom: env(safe-area-inset-bottom)) { - bottom: 0; - } + bottom: 0; @media (max-width: 600px) { padding-right: 1rem; + + @supports (bottom: env(safe-area-inset-bottom)) { + bottom: env(safe-area-inset-bottom); + } } &::before { diff --git a/src/components/middle/composer/SymbolMenu.scss b/src/components/middle/composer/SymbolMenu.scss index 4441b3314..56f0ddc5a 100644 --- a/src/components/middle/composer/SymbolMenu.scss +++ b/src/components/middle/composer/SymbolMenu.scss @@ -16,9 +16,9 @@ transition: transform var(--layer-transition); padding-right: env(safe-area-inset-right); - padding-bottom: env(safe-area-inset-bottom); + padding-bottom: 0; padding-left: env(safe-area-inset-left); - transform: translate3d(0, calc(var(--symbol-menu-height) + env(safe-area-inset-bottom)), 0); + transform: translate3d(0, calc(var(--symbol-menu-height)), 0); &.open:not(.in-attachment-modal) { transform: translate3d(0, 0, 0); @@ -36,11 +36,17 @@ // Target: Old Firefox (Waterfox Classic) @supports not (padding-right: env(safe-area-inset-right)) { padding-right: 0; - padding-bottom: 0; padding-left: 0; transform: translate3d(0, calc(var(--symbol-menu-height)), 0); } + @media (max-width: 600px) { + @supports not (padding-right: env(safe-area-inset-right)) { + padding-bottom: env(safe-area-inset-bottom); + transform: translate3d(0, calc(var(--symbol-menu-height) + env(safe-area-inset-bottom)), 0); + } + } + body.no-page-transitions & { transition: none; } @@ -52,11 +58,12 @@ &-main { height: calc(var(--symbol-menu-height) - var(--symbol-menu-footer-height)); - max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom)); + max-height: calc(100vh - var(--symbol-menu-footer-height)); - // Target: Old Firefox (Waterfox Classic) - @supports not (max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom))) { - max-height: calc(100vh - var(--symbol-menu-footer-height)); + @media (max-width: 600px) { + @supports (max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom))) { + max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom)); + } } }