diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue index aab7631e365eab5de3de45e3f864f9ff27841a4f..2f941a311df1108abfaa7128b37daf0bc0023889 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 a1020ef151fa6cd9b960dd0ff0728116f0046025..94dabcac9090f88f53232a9c500ee2c1fd44805c 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 84dcfc36224895e0a345f9cb64e36166205a30a1..01b227a672658485325242d0fe40ec4428b58968 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 3cd76024238ce706ce5ce78ba20e505bfaf7a70d..22c297dc310a0dd332eb7144d191873eb40d7c0a 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 0333e20d0afaacd3cfd4fd83fc7a5d07db4c17af..d1f37d398ff6048292ae0fc0b14d5e338e4cf950 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; - } } </style> diff --git a/packages/frontend/src/ui/_common_/stream-indicator.vue b/packages/frontend/src/ui/_common_/stream-indicator.vue index a855de8ab9ea4a3ad5d0ce733ed8e9c7fb595254..9a67c15cb59a3200dcb1380fe6edda652403f116 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 3d74fc9ee3d7f042ec7131eb619183fc0ad5cd8f..fcc0b468e3d8be5b97f0249cf9732348c089686f 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)); } </style>