App-Ansicht iOS-App: Tab-Leiste sitzt wieder ganz unten

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>

public/app.js

@@ -1678,6 +1678,20 @@ function preventIosFocusZoom() {
 }
 preventIosFocusZoom()
 
+// Installierte App auf dem iPhone: Mit durchsichtiger Statusleiste (black-translucent) ist der
+// Layout-Bereich oft um die Hoehe der Statusleiste kuerzer als der Bildschirm (bekannter WebKit-Fehler).
+// Ist die Seite kuerzer als der Bildschirm, haengen fixierte Leisten dann so weit ueber dem unteren Rand.
+// Abhilfe: Seite mindestens bildschirmhoch (--kb-screen-h in login.css/kundenbereich.css). Die Hoehe
+// kommt aus screen.*, weil innerHeight/100dvh in diesem Zustand selbst zu kurz sein koennen.
+function syncIosStandaloneHeight() {
+  if (!isIosDevice() || !isStandaloneApp()) return
+  const landscape = window.matchMedia('(orientation: landscape)').matches
+  const full = landscape ? Math.min(screen.width, screen.height) : Math.max(screen.width, screen.height)
+  if (full > 0) document.documentElement.style.setProperty('--kb-screen-h', `${full}px`)
+}
+syncIosStandaloneHeight()
+window.addEventListener('resize', syncIosStandaloneHeight)
+
 // App-Installation (Homescreen) und Offline-Seite; zwischengespeichert wird nur die Offline-Seite (sw.js)
 if ('serviceWorker' in navigator && window.isSecureContext) {
   window.addEventListener('load', () => {

public/kundenbereich.css

@@ -590,11 +590,12 @@ button.kb-avatar:disabled { cursor: default; box-shadow: none; }
   .kb-invoices .inv-actions .btn-link:first-child:not(:last-child) { flex: 1.7; }
 
   /* Chat: fuellt den Platz zwischen App-Leiste und Tab-Leiste. 100dvh folgt auf Android der Tastatur
-     (interactive-widget=resizes-content); auf iOS bleibt die Hoehe, Safari schiebt das Feld selbst hoch */
+     (interactive-widget=resizes-content); auf iOS bleibt die Hoehe, Safari schiebt das Feld selbst hoch.
+     Installierte App auf dem iPhone: Bildschirmhoehe (--kb-screen-h), dvh ist dort teils zu kurz */
   #view-chat.active {
     display: flex; flex-direction: column;
     height: calc(100vh - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px);
-    height: calc(100dvh - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px);
+    height: calc(max(100dvh, var(--kb-screen-h, 0px)) - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px);
   }
   #view-chat .kb-head { flex: none; margin-bottom: 12px; }
   #view-chat .chat-box { flex: 1 1 auto; min-height: 0; height: auto; padding: 10px; border-radius: 20px; }

public/login.css

@@ -11,6 +11,9 @@
   --glass: rgba(255, 255, 255, 0.25);
   --glass-border: rgba(255, 255, 255, 0.12);
   min-height: 100svh;
+  /* Installierte App auf dem iPhone: mindestens bildschirmhoch, sonst haengen fixierte Leisten
+     ueber dem unteren Rand (iOS-Fehler bei black-translucent, siehe syncIosStandaloneHeight in app.js) */
+  min-height: max(100svh, var(--kb-screen-h, 0px));
   margin: 0;
   background: #0a0a0a;
   color: #fff;