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 { html {
min-height: 100%; min-height: 100%;
min-height: -webkit-fill-available;
color-scheme: dark; color-scheme: dark;
} }
body { body {
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
min-height: -webkit-fill-available;
font-family: var(--font-ui); font-family: var(--font-ui);
background: background:
var(--body-radial-one), var(--body-radial-one),
@@ -822,13 +824,16 @@ body.page-dashboard .content {
position: fixed; position: fixed;
inset: 0; inset: 0;
width: 100vw; width: 100vw;
min-height: 100vh; height: 100vh;
height: 100dvh;
min-height: -webkit-fill-available;
z-index: 60; z-index: 60;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
justify-content: stretch; justify-content: stretch;
padding: 0; padding: 0;
overflow: auto; overflow: hidden;
overscroll-behavior: contain;
} }
.dashboard-overlay__backdrop { .dashboard-overlay__backdrop {
@@ -842,12 +847,19 @@ body.page-dashboard .content {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
width: 100%; width: 100%;
min-height: 100vh; min-height: 0;
max-height: none; height: 100%;
max-height: 100%;
margin: 0; 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; border-radius: 0;
overflow: auto; 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)); background: linear-gradient(180deg, rgba(26, 26, 29, 0.96), rgba(38, 38, 42, 0.92));
border-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.08);
z-index: 1; z-index: 1;
@@ -858,6 +870,9 @@ body.page-dashboard .content {
} }
.dashboard-modal__controls { .dashboard-modal__controls {
position: sticky;
top: 0;
z-index: 2;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -1591,13 +1606,16 @@ body.page-dashboard .content {
position: fixed; position: fixed;
inset: 0; inset: 0;
width: 100vw; width: 100vw;
min-height: 100vh; height: 100vh;
height: 100dvh;
min-height: -webkit-fill-available;
z-index: 70; z-index: 70;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
justify-content: stretch; justify-content: stretch;
padding: 0; padding: 0;
overflow: auto; overflow: hidden;
overscroll-behavior: contain;
} }
.options-overlay__backdrop { .options-overlay__backdrop {
@@ -1612,14 +1630,24 @@ body.page-dashboard .content {
z-index: 1; z-index: 1;
flex: 1 1 auto; flex: 1 1 auto;
width: 100%; width: 100%;
min-height: 100vh; min-height: 0;
max-height: none; height: 100%;
padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); 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; border-radius: 0;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
} }
.options-modal__controls { .options-modal__controls {
position: sticky;
top: 0;
z-index: 2;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-bottom: 0.8rem; margin-bottom: 0.8rem;
@@ -1695,11 +1723,12 @@ body.page-dashboard .content {
.dashboard-modal { .dashboard-modal {
margin: 0; margin: 0;
width: 100%; width: 100%;
max-height: 100vh; height: 100%;
min-height: 100vh; max-height: 100%;
min-height: 0;
border-radius: 0; border-radius: 0;
padding-top: max(1rem, env(safe-area-inset-top)); padding-top: calc(max(1.25rem, env(safe-area-inset-top)) + 0.75rem);
padding-bottom: max(1rem, env(safe-area-inset-bottom)); padding-bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 1.75rem);
} }
.dashboard-overlay, .dashboard-overlay,
@@ -1725,11 +1754,12 @@ body.page-dashboard .content {
.options-modal { .options-modal {
width: 100%; width: 100%;
max-height: 100vh; height: 100%;
min-height: 100vh; max-height: 100%;
min-height: 0;
border-radius: 0; border-radius: 0;
padding-top: max(1rem, env(safe-area-inset-top)); padding-top: calc(max(1.25rem, env(safe-area-inset-top)) + 0.75rem);
padding-bottom: max(1rem, env(safe-area-inset-bottom)); padding-bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 1.75rem);
} }
} }