fix: Karten-Container füllt jetzt die volle Kachel-Höhe aus

- CSS: min-height:0 und height:100% für Flex-Container
- JS: Höhe wird immer explizit aus der Gridstack-Kachel berechnet,
  nicht nur als Fallback unter 50px

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Dev
2026-03-15 13:47:52 +01:00
Ursprung 9591784ee4
Commit 5fd65657c5
2 geänderte Dateien mit 10 neuen und 11 gelöschten Zeilen

Datei anzeigen

@@ -4307,8 +4307,10 @@ select:focus-visible, textarea:focus-visible,
} }
.map-container { .map-container {
flex: 1 1 0; flex: 1 1 0;
min-height: 0;
position: relative; position: relative;
z-index: 1; z-index: 1;
height: 100%;
} }
/* Leaflet braucht eine absolute Hoehe - wir setzen sie per JS, /* Leaflet braucht eine absolute Hoehe - wir setzen sie per JS,
aber als Fallback nutzen wir eine CSS-Regel */ aber als Fallback nutzen wir eine CSS-Regel */

Datei anzeigen

@@ -698,17 +698,14 @@ const UI = {
if (statsEl) statsEl.textContent = `${locations.length} Orte / ${totalArticles} Artikel`; if (statsEl) statsEl.textContent = `${locations.length} Orte / ${totalArticles} Artikel`;
// Container-Hoehe sicherstellen (Leaflet braucht px-Hoehe) // Container-Hoehe sicherstellen (Leaflet braucht px-Hoehe)
if (container.offsetHeight < 50) { const gsItem = container.closest('.grid-stack-item');
// Fallback: Hoehe aus gridstack-Item berechnen if (gsItem) {
const gsItem = container.closest('.grid-stack-item'); const headerEl = container.closest('.map-card')?.querySelector('.card-header');
if (gsItem) { const headerH = headerEl ? headerEl.offsetHeight : 40;
const headerEl = container.closest('.map-card')?.querySelector('.card-header'); const available = gsItem.offsetHeight - headerH - 4;
const headerH = headerEl ? headerEl.offsetHeight : 40; container.style.height = Math.max(available, 200) + 'px';
const available = gsItem.offsetHeight - headerH - 4; } else if (container.offsetHeight < 50) {
container.style.height = Math.max(available, 200) + 'px'; container.style.height = '300px';
} else {
container.style.height = '300px';
}
} }
// Karte initialisieren oder updaten // Karte initialisieren oder updaten