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>
Der Fix aus bd7b1fc (Seite mindestens bildschirmhoch) hat nicht gewirkt
und wird zurueckgenommen. Die Ursache ist nicht die Seitenhoehe:
Bei black-translucent ist der Bereich fuer fixierte Elemente in der
installierten iOS-App um die Statusleiste (59 pt) kuerzer als der
Bildschirm. Solange die Seite oben steht, klebt dieser Bereich oben, und
die Tab-Leiste haengt ueber dem unteren Rand. Nach dem Herunterscrollen
sitzt sie richtig, deshalb sah es nur im Chat gut aus.
Mit undurchsichtiger Statusleiste (black) beginnt die App unterhalb der
Statusleiste, und der Bereich ist korrekt bemessen. Nachteil: Der lila
Schimmer reicht nicht mehr hinter die Uhrzeit. Die Abstaende oben kommen
weiter aus env(safe-area-inset-top), das dann 0 ist.
Browser, Android und Desktop unveraendert (pixelgleich).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
In der installierten App auf dem iPhone hing die Tab-Leiste auf kurzen
Seiten (z. B. leere Tabs Projekte, Rechnungen, Fortschritt) 59 px ueber
dem unteren Rand, darunter ein schwarzer Streifen; im Chat nicht.
Das ist ein bekannter WebKit-Fehler bei black-translucent: Der
Layout-Bereich ist um die Hoehe der Statusleiste kuerzer als der
Bildschirm, und auf Seiten, die kuerzer als der Bildschirm sind, docken
fixierte Leisten an dieses zu kurze Ende. Der Chat ist hoeher als der
Bildschirm und war deshalb nicht betroffen.
- Installierte App auf iOS: Seite mindestens bildschirmhoch. Die Hoehe
kommt aus screen.* (--kb-screen-h), weil innerHeight, 100svh und 100dvh
in diesem Zustand selbst zu kurz sein koennen. Das gilt auch fuer den
Login und die Chat-Hoehe.
- Safari im Browser, Android und Desktop unveraendert (pixelgleich).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Auf dem Handy (unter 880 px und Handys quer) sieht der Kundenbereich aus wie
eine App; der Desktop bleibt pixelgleich.
- Kopfzeile als App-Leiste: Logo, beim Scrollen der Seitentitel, Avatar
- Navigation als Tab-Leiste unten mit Symbolen und Zaehlern; neuer Tab
"Wartung" mit der Abo-Karte, Stundenkonto/Bestellung und
Uebernahmegutschrift als Unterseiten mit Zurueck (auch Android-Geste)
- Konto als Bottom-Sheet (Ansprechpartner, Vertraege kuendigen/widerrufen,
Rechtliches, Abmelden), am Desktop als Popover unter dem Avatar
- Rechnungen als Karten, Fortschritt als Zeitleiste, Chat fuellt den
Bildschirm; bei offener Tastatur verschwindet die Tab-Leiste (kommt auch
nach der Android-Zurueck-Geste wieder)
- Installierbar: Manifest, App-Icons (WEBklar-Logo), Favicon, Hinweis
"Zum Home-Bildschirm"; Service Worker nur fuer die Offline-Seite,
Kundendaten werden nicht zwischengespeichert
- Installierte App: Kuendigen/Widerrufen mit Link zurueck in den
Kundenbereich (nur dort sichtbar, Texte unveraendert); Login-Links zu
Bedingungen/Datenschutz/Impressum oeffnen wie im Dashboard ein neues Fenster
- Login mit App-Icon und Abstaenden fuer Statusleiste/Home-Balken
- Hinweise "in der Seitenleiste" haben auf dem Handy eine eigene Fassung
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
knso