diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue index aab7631e36..2f941a311d 100644 --- a/packages/frontend/src/components/MkLaunchPad.vue +++ b/packages/frontend/src/components/MkLaunchPad.vue @@ -75,7 +75,7 @@ function close() { &.asDrawer { width: 100%; - padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px; + padding: 16px 16px max(env(safe-area-inset-bottom, 0px), 16px) 16px; border-radius: 24px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue index a1020ef151..94dabcac90 100644 --- a/packages/frontend/src/components/MkMenu.vue +++ b/packages/frontend/src/components/MkMenu.vue @@ -201,7 +201,7 @@ onBeforeUnmount(() => { } &.asDrawer { - padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0; + padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0; width: 100%; border-radius: 24px; border-bottom-right-radius: 0; diff --git a/packages/frontend/src/pages/messaging/messaging-room.vue b/packages/frontend/src/pages/messaging/messaging-room.vue index 84dcfc3622..01b227a672 100644 --- a/packages/frontend/src/pages/messaging/messaging-room.vue +++ b/packages/frontend/src/pages/messaging/messaging-room.vue @@ -351,7 +351,6 @@ definePageMetadata(computed(() => !fetching ? user ? { z-index: 2; bottom: 0; padding-top: 8px; - bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); > .new-message { width: 100%; diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss index 3cd7602423..22c297dc31 100644 --- a/packages/frontend/src/style.scss +++ b/packages/frontend/src/style.scss @@ -6,9 +6,11 @@ --marginHalf: 10px; --margin: var(--marginFull); - + --minBottomSpacing: 0px; + @media (max-width: 500px) { --margin: var(--marginHalf); + --minBottomSpacing: calc(72px + max(12px, env(safe-area-inset-bottom, 0px))); } //--ad: rgb(255 169 0 / 10%); diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue index 0333e20d0a..d1f37d398f 100644 --- a/packages/frontend/src/ui/_common_/common.vue +++ b/packages/frontend/src/ui/_common_/common.vue @@ -98,10 +98,10 @@ if ($i) { } } - @media (max-width: 700px) { + @media (max-width: 500px) { top: initial; - bottom: 112px; - padding: 0 16px; + bottom: calc(var(--minBottomSpacing) + var(--margin)); + padding: 0 var(--margin); display: flex; flex-direction: column-reverse; @@ -112,11 +112,6 @@ if ($i) { } } } - - @media (max-width: 500px) { - bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); - padding: 0 8px; - } } diff --git a/packages/frontend/src/ui/_common_/stream-indicator.vue b/packages/frontend/src/ui/_common_/stream-indicator.vue index a855de8ab9..9a67c15cb5 100644 --- a/packages/frontend/src/ui/_common_/stream-indicator.vue +++ b/packages/frontend/src/ui/_common_/stream-indicator.vue @@ -38,8 +38,8 @@ onUnmounted(() => { .nsbbhtug { position: fixed; z-index: 16385; - bottom: 8px; - right: 8px; + bottom: calc(var(--minBottomSpacing) + var(--margin)); + right: var(--margin); margin: 0; padding: 6px 12px; font-size: 0.9em; diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue index 3d74fc9ee3..fcc0b468e3 100644 --- a/packages/frontend/src/ui/universal.vue +++ b/packages/frontend/src/ui/universal.vue @@ -392,12 +392,6 @@ $widgets-hide-threshold: 1090px; } .spacer { - $widgets-hide-threshold: 1090px; - - height: calc(env(safe-area-inset-bottom, 0px) + 96px); - - @media (min-width: ($widgets-hide-threshold + 1px)) { - display: none; - } + height: calc(var(--minBottomSpacing)); }