From f0f767e466aee8dac64f0048d3d6f0834aed913d Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Fri, 15 May 2026 13:43:17 +0200
Subject: [PATCH] =?UTF-8?q?Fix:=20iOS=20Tastatur=20=E2=80=94=20modal-body?=
 =?UTF-8?q?=20maxHeight=20begrenzen=20+=20manueller=20scroll=20statt=20scr?=
 =?UTF-8?q?ollIntoView=20(SW=20by-v978)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/main.py          |  2 +-
 backend/static/js/app.js |  2 +-
 backend/static/js/ui.js  | 28 +++++++++++++++++++++-------
 backend/static/sw.js     |  2 +-
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/backend/main.py b/backend/main.py
index 8bcb55c..419babe 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -408,7 +408,7 @@ async def serve_media(path: str, request: _Request):
         raise _HE(404, "Nicht gefunden.")
     return _media_response(filepath)
 
-APP_VER = "977"  # muss mit APP_VER in app.js übereinstimmen
+APP_VER = "978"  # muss mit APP_VER in app.js übereinstimmen
 
 @app.get("/.well-known/assetlinks.json")
 async def assetlinks():
diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index 4fb0b34..cb220e1 100644
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '977'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '978'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 // Cache-Bust-Parameter nach Update-Reload sofort entfernen
diff --git a/backend/static/js/ui.js b/backend/static/js/ui.js
index 0729963..9da043f 100644
--- a/backend/static/js/ui.js
+++ b/backend/static/js/ui.js
@@ -83,13 +83,19 @@ const UI = (() => {
       document.getElementById('modal-container').appendChild(overlay);
       document.documentElement.classList.add('modal-open');
 
-      // Tastatur auf Mobilgeräten: Modal nach oben schieben + fokussiertes Feld einblenden
+      // Tastatur auf Mobilgeräten: Modal-Höhe begrenzen + fokussiertes Feld scrollen
       let _vvCleanup = null;
       const vv = window.visualViewport;
+      const modal = overlay.querySelector('.modal');
       if (vv) {
         const adjust = () => {
-          const kb = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
-          overlay.style.paddingBottom = (kb + 16) + 'px';
+          const visible = vv.height;
+          const offset  = vv.offsetTop;
+          const kb      = Math.max(0, window.innerHeight - visible - offset);
+          // Overlay-Padding damit Modal nach oben rückt
+          overlay.style.paddingBottom = (kb + 8) + 'px';
+          // Modal-Höhe hart begrenzen damit modal-body scrollbar bleibt
+          if (modal) modal.style.maxHeight = (visible - 24) + 'px';
         };
         vv.addEventListener('resize', adjust);
         vv.addEventListener('scroll', adjust);
@@ -97,15 +103,23 @@ const UI = (() => {
           vv.removeEventListener('resize', adjust);
           vv.removeEventListener('scroll', adjust);
           overlay.style.paddingBottom = '';
+          if (modal) modal.style.maxHeight = '';
         };
       }
 
-      // Fokussiertes Feld in den sichtbaren Bereich scrollen (iOS)
+      // Fokussiertes Feld innerhalb modal-body scrollen (iOS scrollIntoView
+      // arbeitet nicht zuverlässig in overflow-Containern)
       const _onFocusin = e => {
         const el = e.target;
-        if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.tagName === 'SELECT') {
-          setTimeout(() => el.scrollIntoView({ block: 'nearest', behavior: 'smooth' }), 320);
-        }
+        if (el.tagName !== 'INPUT' && el.tagName !== 'TEXTAREA' && el.tagName !== 'SELECT') return;
+        setTimeout(() => {
+          const body = el.closest('.modal-body');
+          if (!body) { el.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); return; }
+          const elBottom   = el.getBoundingClientRect().bottom;
+          const vvBottom   = vv ? (vv.offsetTop + vv.height) : window.innerHeight;
+          const gap        = elBottom - vvBottom + 56; // 56px Puffer über Tastatur
+          if (gap > 0) body.scrollTop += gap;
+        }, 380);
       };
       overlay.addEventListener('focusin', _onFocusin);
 
diff --git a/backend/static/sw.js b/backend/static/sw.js
index 0c0b8f3..fa39e6d 100644
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v977';
+const CACHE_VERSION = 'by-v978';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten
 const CACHE_API     = 'ban-yaro-api-v1';    // API-Response-Cache