From d72d30dd2a13d43db0f6779ce10c9088ba6cb351 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 26 Sep 2026 15:58:06 +0000 Subject: [PATCH] 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 --- public/dashboard.html | 7 ++++--- public/kundenbereich.css | 17 +++++++++++++++++ public/legal-form.css | 2 ++ public/login.css | 14 ++++++++++++++ public/login.html | 7 ++++--- 5 files changed, 41 insertions(+), 6 deletions(-) diff --git a/public/dashboard.html b/public/dashboard.html index b37b96a..050bee1 100644 --- a/public/dashboard.html +++ b/public/dashboard.html @@ -12,9 +12,10 @@ - - + + diff --git a/public/kundenbereich.css b/public/kundenbereich.css index aa9954e..e0d1653 100644 --- a/public/kundenbereich.css +++ b/public/kundenbereich.css @@ -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; } diff --git a/public/legal-form.css b/public/legal-form.css index cc5d300..410d785 100644 --- a/public/legal-form.css +++ b/public/legal-form.css @@ -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; } } diff --git a/public/login.css b/public/login.css index 8db3562..7729bfe 100644 --- a/public/login.css +++ b/public/login.css @@ -633,3 +633,17 @@ margin-bottom: 28px; } } + +/* Installierte App auf dem iPhone (black-translucent): iOS gibt fixierten Elementen die volle + Bildschirmhoehe nur, solange die Seite scrollbar ist – sonst haengen Tab-Leiste & Co. um die Hoehe + der Statusleiste ueber dem unteren Rand. Deshalb ist die Seite dort immer mindestens 1 px hoeher als + der Bildschirm; 100lvh ist in diesem Modus die volle Hoehe (100%, 100svh und 100dvh sind zu kurz). */ +@media (display-mode: standalone) { + @supports (-webkit-touch-callout: none) { + .portal-page, + .login-page { + min-height: calc(100vh + 1px); + min-height: calc(100lvh + 1px); + } + } +} diff --git a/public/login.html b/public/login.html index 0c33f34..0fea09a 100644 --- a/public/login.html +++ b/public/login.html @@ -12,9 +12,10 @@ - - + +