fix(pwa): Layout berücksichtigt iOS-Safe-Area auch im Hauptbereich

Bisher bekam nur .topbar Safe-Area-Padding, aber .content-wrapper
rechnete weiter starr mit --topbar-h. Im PWA-Standalone-Modus auf
iPhones mit Notch lief der Kalender dadurch oben in die Status-Bar
und unten in den Home-Indicator hinein — die Wochentag-Header und
Tagesnummern der ersten Zeile waren verdeckt, die letzte Zeile
zu kurz.

- .content-wrapper: margin-top und height berechnen jetzt safe-top
  und safe-bottom mit ein
- .sidebar (Mobile-Overlay): top startet ebenfalls unterhalb der
  vergrösserten Topbar

Version v10 → v11.
This commit is contained in:
Scarriffle
2026-05-07 20:01:48 +02:00
parent e52299fc08
commit 15b6c90b11
4 changed files with 26 additions and 13 deletions

View File

@@ -1534,7 +1534,20 @@ a { color: var(--primary); text-decoration: none; }
/* iOS notch / home-indicator safe areas (PWA standalone) */
@supports (padding: env(safe-area-inset-top)) {
.topbar { padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h) + env(safe-area-inset-top)); }
.topbar {
padding-top: env(safe-area-inset-top);
height: calc(var(--topbar-h) + env(safe-area-inset-top));
}
.sidebar { padding-bottom: env(safe-area-inset-bottom); }
/* The main content sits below the (now taller) topbar and must not
extend behind the home indicator at the bottom. */
.content-wrapper {
margin-top: calc(var(--topbar-h) + env(safe-area-inset-top));
height: calc(100vh - var(--topbar-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
/* On mobile the slide-in sidebar also needs to start below the larger topbar */
@media (max-width: 768px) {
.sidebar { top: calc(var(--topbar-h) + env(safe-area-inset-top)); }
}
}