hnzio/mood-tracking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

fix(overlays): improve ios safe area scrolling

Browse Source
This commit is contained in:
Florian Heinz
2026-05-18 16:39:38 +02:00
parent 48df9831fd
commit b8a96e96ef
1 changed files with 48 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+48 -18
View File
@@ -187,12 +187,14 @@
html {
min-height: 100%;
min-height: -webkit-fill-available;
color-scheme: dark;
}
body {
margin: 0;
min-height: 100vh;
min-height: -webkit-fill-available;
font-family: var(--font-ui);
background:
var(--body-radial-one),
@@ -822,13 +824,16 @@ body.page-dashboard .content {
position: fixed;
inset: 0;
width: 100vw;
min-height: 100vh;
height: 100vh;
height: 100dvh;
min-height: -webkit-fill-available;
z-index: 60;
display: flex;
align-items: stretch;
justify-content: stretch;
padding: 0;
overflow: auto;
overflow: hidden;
overscroll-behavior: contain;
}
.dashboard-overlay__backdrop {
@@ -842,12 +847,19 @@ body.page-dashboard .content {
position: relative;
flex: 1 1 auto;
width: 100%;
min-height: 100vh;
max-height: none;
min-height: 0;
height: 100%;
max-height: 100%;
margin: 0;
padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
padding:
calc(max(1.25rem, env(safe-area-inset-top)) + 0.75rem)
max(1rem, env(safe-area-inset-right))
calc(max(1.25rem, env(safe-area-inset-bottom)) + 1.75rem)
max(1rem, env(safe-area-inset-left));
border-radius: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
background: linear-gradient(180deg, rgba(26, 26, 29, 0.96), rgba(38, 38, 42, 0.92));
border-color: rgba(255, 255, 255, 0.08);
z-index: 1;
@@ -858,6 +870,9 @@ body.page-dashboard .content {
}
.dashboard-modal__controls {
position: sticky;
top: 0;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center;
@@ -1591,13 +1606,16 @@ body.page-dashboard .content {
position: fixed;
inset: 0;
width: 100vw;
min-height: 100vh;
height: 100vh;
height: 100dvh;
min-height: -webkit-fill-available;
z-index: 70;
display: flex;
align-items: stretch;
justify-content: stretch;
padding: 0;
overflow: auto;
overflow: hidden;
overscroll-behavior: contain;
}
.options-overlay__backdrop {
@@ -1612,14 +1630,24 @@ body.page-dashboard .content {
z-index: 1;
flex: 1 1 auto;
width: 100%;
min-height: 100vh;
max-height: none;
padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
min-height: 0;
height: 100%;
max-height: 100%;
padding:
calc(max(1.25rem, env(safe-area-inset-top)) + 0.75rem)
max(1rem, env(safe-area-inset-right))
calc(max(1.25rem, env(safe-area-inset-bottom)) + 1.75rem)
max(1rem, env(safe-area-inset-left));
border-radius: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.options-modal__controls {
position: sticky;
top: 0;
z-index: 2;
display: flex;
justify-content: flex-end;
margin-bottom: 0.8rem;
@@ -1695,11 +1723,12 @@ body.page-dashboard .content {
.dashboard-modal {
margin: 0;
width: 100%;
max-height: 100vh;
min-height: 100vh;
height: 100%;
max-height: 100%;
min-height: 0;
border-radius: 0;
padding-top: max(1rem, env(safe-area-inset-top));
padding-bottom: max(1rem, env(safe-area-inset-bottom));
padding-top: calc(max(1.25rem, env(safe-area-inset-top)) + 0.75rem);
padding-bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 1.75rem);
}
.dashboard-overlay,
@@ -1725,11 +1754,12 @@ body.page-dashboard .content {
.options-modal {
width: 100%;
max-height: 100vh;
min-height: 100vh;
height: 100%;
max-height: 100%;
min-height: 0;
border-radius: 0;
padding-top: max(1rem, env(safe-area-inset-top));
padding-bottom: max(1rem, env(safe-area-inset-bottom));
padding-top: calc(max(1.25rem, env(safe-area-inset-top)) + 0.75rem);
padding-bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 1.75rem);
}
}