Mini Apps: Respect safe-area-inset-bottom on mobile (#6918)
This commit is contained in:
parent
a2d6d63853
commit
f2b3eed845
@ -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 {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user