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:
1 parent
57ba2c06f9
commit
d72d30dd2a
5 files changed
+41
-6
No files matched your search
@@ -667,6 +667,23 @@ button.kb-avatar:disabled { cursor: default; box-shadow: none; }
|
||||
#view-chat .kb-head { display: none; }
|
||||
}
|
||||
|
||||
/* Installierte App auf dem iPhone (black-translucent, siehe login.css): 100dvh ist dort um die Statusleiste
|
||||
zu kurz, 100lvh die volle Hoehe. Die Seite muss scrollbar bleiben (kein overflow: hidden beim Sheet),
|
||||
Overlays werden von oben mit voller Hoehe verankert statt mit inset: 0. */
|
||||
@media (display-mode: standalone) {
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
.kb-page .chat-overlay { top: 0; bottom: auto; height: 100lvh; } /* staerker als inset: 0 aus chat-composer.css */
|
||||
}
|
||||
}
|
||||
@media (display-mode: standalone) and (max-width: 880px), (display-mode: standalone) and (pointer: coarse) and (max-height: 500px) {
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
#view-chat.active { height: calc(100lvh - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px); }
|
||||
html.kb-sheet-open { overflow: visible; }
|
||||
.kb-sheet[open] { top: 0; bottom: auto; height: 100lvh; max-height: none; display: flex; flex-direction: column; justify-content: flex-end; }
|
||||
.kb-sheet-panel { max-height: calc(100lvh - env(safe-area-inset-top) - 24px); }
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.kb-shell.dashboard-content-reveal, .kb-view.active, .kb-sheet[open] .kb-sheet-panel, #loading:not(.hidden) { animation: none !important; }
|
||||
.kb-header, .kb-nav, .kb-logo, .kb-app-title, .kb-sheet-panel { transition: none !important; }
|
||||
|
||||
Reference in new issue
Block a user