Mini Apps: Respect safe-area-inset-bottom on mobile (#6918)

This commit is contained in:
Alexander Zinchuk 2026-05-05 13:46:48 +02:00
parent a2d6d63853
commit f2b3eed845

View File

@ -1,6 +1,8 @@
@use "../../../styles/mixins"; @use "../../../styles/mixins";
.root { .root {
--web-app-safe-area-bottom: 0rem;
position: relative; position: relative;
z-index: 0; z-index: 0;
@ -10,6 +12,10 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;
@media (max-width: 600px) {
--web-app-safe-area-bottom: env(safe-area-inset-bottom);
}
} }
.multi-tab { .multi-tab {
@ -85,7 +91,7 @@
transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out;
&.with-button { &.with-button {
height: calc(100% - 3.5rem); height: calc(100% - 3.5rem - var(--web-app-safe-area-bottom));
} }
&.hide { &.hide {
@ -146,6 +152,7 @@
justify-content: space-between; justify-content: space-between;
height: 0rem; height: 0rem;
padding-bottom: var(--web-app-safe-area-bottom);
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
transition-duration: 0.25s; transition-duration: 0.25s;
@ -155,11 +162,11 @@
&.one-row { &.one-row {
align-items: center; align-items: center;
height: 4rem; height: calc(4rem + var(--web-app-safe-area-bottom));
} }
&.two-rows { &.two-rows {
height: 8rem; height: calc(8rem + var(--web-app-safe-area-bottom));
} }
&.left-to-right { &.left-to-right {