App-Ansicht iOS-App: lila bis in die Notch, Tab-Leiste trotzdem ganz unten

Die Statusleiste ist wieder durchsichtig (black-translucent), damit der
lila Hintergrund hinter Uhrzeit und Notch weitergeht. Dass die Tab-Leiste
damit auf kurzen Seiten 59 px zu hoch hing, liegt an einem bekannten
iOS-Verhalten: In der installierten App bekommen fixierte Elemente die
volle Bildschirmhoehe nur, solange die Seite scrollbar ist.

- Installierte App auf iOS (display-mode standalone, nur iOS): Die Seite
  ist immer mindestens 1 px hoeher als der Bildschirm (100lvh + 1px).
  100lvh ist dort die volle Hoehe, 100%, 100svh und 100dvh sind zu kurz.
- Die Chat-Hoehe kommt aus 100lvh.
- Das Konto-Sheet sperrt die Seite dort nicht mehr (overflow bleibt
  sichtbar); es ist von oben mit voller Hoehe verankert, das Panel sitzt
  unten.
- Bild-Grossansicht und Kamera des Chats sind von oben mit voller Hoehe
  verankert statt mit inset: 0.
- Kuendigen/Widerrufen: dunkler Streifen hinter der weissen Statusleiste.

Browser, Android und Desktop unveraendert (pixelgleich).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed 2026-09-26 15:58:06 +00:00
1 parent 57ba2c06f9
commit d72d30dd2a
5 files changed
+41 -6

No files matched your search

+2
View File
@@ -31,5 +31,7 @@ legend { font-weight: 600; font-size: 14px; margin: 14px 0 4px; }
.app-back { display: none; }
@media (display-mode: standalone) {
main { padding-top: max(48px, calc(env(safe-area-inset-top) + 20px)); }
/* Statusleiste ist durchsichtig mit weisser Schrift: dunkler Streifen dahinter, damit Uhrzeit & Co. lesbar sind */
body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: env(safe-area-inset-top); background: #1d1d1f; }
.app-back { display: inline-block; margin-bottom: 18px; font-size: 15px; font-weight: 600; text-decoration: none; }
}