From cd5688ae8fbc035a76bdb955276082989f741016 Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Thu, 30 Apr 2026 08:04:11 +0200
Subject: [PATCH] =?UTF-8?q?Fix:=20iOS=20Bottom-Nav=20=E2=80=94=20#app=20po?=
 =?UTF-8?q?sition:fixed+inset:0,=20Nav=20als=20Flex-Kind?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

position:fixed auf #bottom-nav funktioniert in iOS PWA-Standalone-Mode nicht
zuverlässig (driftet beim Scrollen). Fix: #app selbst position:fixed;inset:0
→ Nav ist normales Flex-Kind am unteren Rand → kein iOS-Fixed-Bug möglich.
Desktop: #app position:static via Media Query. SW by-v529, APP_VER 506
---
 backend/static/css/layout.css | 55 +++++++++++++++--------------------
 backend/static/js/app.js      |  2 +-
 backend/static/sw.js          |  2 +-
 3 files changed, 25 insertions(+), 34 deletions(-)

diff --git a/backend/static/css/layout.css b/backend/static/css/layout.css
index 1b8711e..5203654 100644
--- a/backend/static/css/layout.css
+++ b/backend/static/css/layout.css
@@ -7,51 +7,48 @@
 /* ------------------------------------------------------------
    1. APP SHELL
    ------------------------------------------------------------ */
+/* Mobile: #app als fixed Container — einzig zuverlässiger iOS-PWA-Fix.
+   #bottom-nav braucht dann kein position:fixed mehr, er ist Flex-Kind
+   am unteren Rand des fixierten Containers. */
 #app {
+  position:       fixed;
+  inset:          0;
   display:        flex;
   flex-direction: column;
-  min-height:     100dvh;
+  overflow:       hidden;
 }
 
-/* Content-Bereich: window scrollt — kein overflow-y hier.
-   position:fixed auf #bottom-nav funktioniert auf iOS nur zuverlässig
-   wenn der window-scroll aktiv ist, nicht ein innerer Scroll-Container. */
+/* Content-Bereich scrollt intern */
 #page-content {
   flex:           1;
-  overflow:       visible;
-  padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px);
+  min-height:     0;
+  overflow-y:     auto;
+  overflow-x:     hidden;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: var(--space-4);
 }
 
-/* Vollbild-Seiten (Karte, Routen, Chat, Gassi, Sitting):
-   window-scroll deaktivieren, intern scrollen */
-body.page-fullscreen {
-  overflow:   hidden;
-  height:     100dvh;
-}
-body.page-fullscreen #app {
-  height:     100dvh;
-  overflow:   hidden;
-}
+/* Vollbild-Seiten: #page-content kein Scroll */
 body.page-fullscreen #page-content {
-  flex:       1;
-  min-height: 0;
-  overflow:   hidden;
+  overflow:       hidden;
   padding-bottom: 0;
 }
 
-/* Desktop: Sidebar-Layout — kein Bottom-Nav */
+/* Desktop: normaler Dokumentfluss, Sidebar-Layout */
 @media (min-width: 768px) {
   #app {
+    position:   static;
+    min-height: 100dvh;
+    overflow:   visible;
     flex-direction: row;
   }
   #page-content {
+    min-height:     unset;
+    overflow-y:     visible;
     padding-bottom: 0;
     padding-left:   var(--nav-sidebar-width);
   }
-  body.page-fullscreen,
-  body.page-fullscreen #app,
   body.page-fullscreen #page-content {
-    height: auto;
     overflow: visible;
   }
 }
@@ -180,15 +177,9 @@ body.page-fullscreen #page-content {
    3. BOTTOM NAVIGATION (Mobile)
    ------------------------------------------------------------ */
 #bottom-nav {
-  position:    fixed;
-  bottom:      0;
-  left:        0;
-  right:       0;
-  z-index:     700;  /* über Leaflet-Panes (~400) */
-  /* GPU-Layer erzwingen → iOS Safari fixed-position Stabilität */
-  transform:   translateZ(0);
-  -webkit-transform: translateZ(0);
-  will-change: transform;
+  /* Flex-Kind statt position:fixed — kein iOS-Drift mehr */
+  flex-shrink: 0;
+  z-index:     700;
   min-height:  calc(var(--nav-bottom-height) + var(--safe-bottom));
   padding-top:    var(--space-1);
   padding-bottom: calc(var(--safe-bottom) + var(--space-1));
diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index b79430f..9630580 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     = '505'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '506'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.0.0'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 
diff --git a/backend/static/sw.js b/backend/static/sw.js
index e950a91..3edc30b 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-v528';
+const CACHE_VERSION = 'by-v529';
 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