From bd7b1fc67145db779d29e2f45a92355937b1941c Mon Sep 17 00:00:00 2001
From: Claude <claude@webklar.local>
Date: Sat, 26 Sep 2026 15:35:48 +0000
Subject: [PATCH] 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            | 14 ++++++++++++++
 public/kundenbereich.css |  5 +++--
 public/login.css         |  3 +++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/public/app.js b/public/app.js
index 236b8ac..e2a6bb7 100644
--- a/public/app.js
+++ b/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', () => {
diff --git a/public/kundenbereich.css b/public/kundenbereich.css
index aa9954e..c3733ea 100644
--- a/public/kundenbereich.css
+++ b/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; }
diff --git a/public/login.css b/public/login.css
index 8db3562..c602f14 100644
--- a/public/login.css
+++ b/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;