From 2ff439a4e3f73bacdb14f12bec7f2f39929f1e9d Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Tue, 14 Apr 2026 16:51:47 +0200
Subject: [PATCH] =?UTF-8?q?Fix:=20Karte=20=E2=80=94=20position:absolute;in?=
 =?UTF-8?q?set:0=20statt=20height:100%=20(kein=20parent-height=20Problem)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/static/css/components.css |  6 +++---
 backend/static/js/pages/map.js    | 27 +++++++++++++--------------
 backend/static/sw.js              |  2 +-
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/backend/static/css/components.css b/backend/static/css/components.css
index 31e84c7..6493bd3 100644
--- a/backend/static/css/components.css
+++ b/backend/static/css/components.css
@@ -1565,9 +1565,9 @@ textarea.form-control {
    ZENTRALE KARTE (map.js)
    ============================================================ */
 .map-full-layout {
-  position:   relative;
-  height:     100%;
-  overflow:   hidden;
+  position: absolute;
+  inset:    0;
+  overflow: hidden;
 }
 .map-full {
   width:  100%;
diff --git a/backend/static/js/pages/map.js b/backend/static/js/pages/map.js
index 55b96f6..3f81735 100644
--- a/backend/static/js/pages/map.js
+++ b/backend/static/js/pages/map.js
@@ -49,6 +49,16 @@ window.Page_map = (() => {
   async function init(container, appState) {
     _container = container;
     _appState  = appState;
+
+    // Map-Container braucht position:relative + kein Padding,
+    // damit .map-full-layout mit position:absolute;inset:0 korrekt füllt.
+    Object.assign(_container.style, {
+      padding:  '0',
+      overflow: 'hidden',
+      position: 'relative',
+      gap:      '0',
+    });
+
     _render();
     try { _userPos = await API.getLocation(); } catch {}
     await _loadLeaflet();
@@ -129,19 +139,6 @@ window.Page_map = (() => {
     const el = document.getElementById('central-map');
     if (!el || !window.L || _map) return;
 
-    // Explizite Pixel-Höhe setzen, damit Leaflet Kacheln lädt.
-    // height:100% auf einem flex:1-Child ohne feste Parent-Höhe = 0px.
-    const layout = el.closest('.map-full-layout');
-    if (layout) {
-      const top = layout.getBoundingClientRect().top;
-      layout.style.height = (window.innerHeight - top) + 'px';
-      window.addEventListener('resize', () => {
-        const t = layout.getBoundingClientRect().top;
-        layout.style.height = (window.innerHeight - t) + 'px';
-        _map?.invalidateSize();
-      });
-    }
-
     const center = _userPos ? [_userPos.lat, _userPos.lon] : [51.1657, 10.4515];
     const zoom   = _userPos ? 13 : 6;
 
@@ -151,7 +148,9 @@ window.Page_map = (() => {
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 })
      .addTo(_map);
 
-    setTimeout(() => _map.invalidateSize(), 100);
+    // invalidateSize nach kurzer Verzögerung, damit der Browser das Layout abgeschlossen hat
+    setTimeout(() => _map.invalidateSize(), 150);
+    window.addEventListener('resize', () => _map.invalidateSize());
   }
 
   // ----------------------------------------------------------
diff --git a/backend/static/sw.js b/backend/static/sw.js
index f0c722a..f0d5815 100644
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications
    ============================================================ */
 
-const CACHE_VERSION = 'by-v25';
+const CACHE_VERSION = 'by-v26';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 
 // Diese Dateien werden beim Install gecacht (App Shell)