fix(pwa): fix remaining iOS scroll bleed and safe-area height overflow (#16)

Root cause 1 (scroll bleed): padding-top was applied to body in standalone
mode. Since .app-shell has height: 100dvh, body-padding shifted the shell
beyond the viewport bottom - enabling body-level scrolling.
Fix: moved padding-top from body to .app-shell in the standalone media query.

Root cause 2 (content overflow): fixed-height page containers
(Calendar, Shopping, Meals, Notes, Budget, Contacts) calculated height as
100dvh - nav-bottom - safe-area-inset-bottom, but never subtracted the top
safe area. This caused each page to overflow .app-content by exactly
env(safe-area-inset-top) pixels in standalone mode.
Fix: added --safe-area-inset-top token and subtracted it in all 6 height
calculations.

Service worker cache bumped to v27/v26.
This commit is contained in:
Ulas
2026-04-06 10:10:01 +02:00
parent f4268ce696
commit dd6c8a313a
10 changed files with 27 additions and 13 deletions
+1 -1
View File
@@ -15,7 +15,7 @@
.notes-page {
display: flex;
flex-direction: column;
height: calc(100dvh - var(--nav-bottom-height) - var(--safe-area-inset-bottom));
height: calc(100dvh - var(--safe-area-inset-top) - var(--nav-bottom-height) - var(--safe-area-inset-bottom));
max-width: var(--content-max-width);
margin: 0 auto;
overflow: hidden;