Global Card Resize

Author: jacquesbach

static/js/layout.js

@@ -85,54 +85,60 @@ async function resetDatabaseLayout() {
     }
 }
 
-function initAutoResizeForCard(cardId) {
+function initAutoHeightGrid() {
 
-    const gridItem = document.getElementById(cardId);
-    const content = gridItem.querySelector(".card");
+    const items = document.querySelectorAll(".grid-stack-item.auto-height");
 
-    if (!gridItem || !content) return;
+    items.forEach(item => {
 
-    let resizeTimeout;
+        const content = item.querySelector(".grid-stack-item-content");
+        const card = content?.querySelector(".card");
 
-    const observer = new ResizeObserver(() => {
+        if (!content || !card) return;
 
-        // kleines Debounce (wichtig wegen Chart.js Render-Zyklen)
-        clearTimeout(resizeTimeout);
+        let resizeTimeout;
 
-        resizeTimeout = setTimeout(() => {
+        const resize = () => {
 
-            const newHeightPx = content.scrollHeight;
+            const rect = card.getBoundingClientRect();
+            const heightPx = rect.height;
 
             const cellHeight = dashboardGrid.getCellHeight();
-            const newGridHeight = Math.ceil(newHeightPx / cellHeight);
+            const newH = Math.ceil(heightPx / cellHeight);
 
-            dashboardGrid.update(gridItem, { h: newGridHeight });
+            // 🔥 Nur updaten wenn nötig (sehr wichtig!)
+            if (item.gridstackNode.h !== newH) {
+                dashboardGrid.update(item, { h: newH });
+            }
+        };
 
-        }, 80); // Sweet Spot
+        const observer = new ResizeObserver(() => {
 
-    });
+            clearTimeout(resizeTimeout);
 
-    observer.observe(content);
-}
+            resizeTimeout = setTimeout(() => {
+                resize();
+            }, 60); // debounce für Chart.js
 
-function forceGridResize(cardId) {
-    const gridItem = document.getElementById(cardId);
-    const content = gridItem.querySelector(".card");
+        });
 
-    if (!gridItem || !content) return;
+        observer.observe(card);
 
-    const newHeightPx = content.scrollHeight;
-    const cellHeight = dashboardGrid.getCellHeight();
-    const newGridHeight = Math.ceil(newHeightPx / cellHeight);
+        // 👉 initial nach Render
+        setTimeout(resize, 300);
 
-    dashboardGrid.update(gridItem, { h: newGridHeight });
+        // 👉 fallback (Fonts / async Layout)
+        requestAnimationFrame(() => {
+            requestAnimationFrame(resize);
+        });
+    });
 }
 
 document.addEventListener("DOMContentLoaded", async () => {
     // --- PHASE 1: Das Gerüst aufbauen ---
     initGridstack();
     await loadLayout(); // Wartet, bis Boxen aus DB oder LocalStorage da sind
-    initAutoResizeForCard("card-forecast");
+    initAutoHeightGrid();
 
     // --- PHASE 2: Startwerte für Datumsfelder setzen ---
     const t = new Date().toISOString().split('T')[0];

static/js/script.js

@@ -1142,7 +1142,7 @@ async function loadForecast() {
            },
            animation: {
             onComplete: () => {
-                forceGridResize("card-forecast");
+                window.dispatchEvent(new Event('resize'));
             }
            }
        }
@@ -1178,7 +1178,7 @@ async function loadFeatureImportance() {
                },
                animation: {
                 onComplete: () => {
-                    forceGridResize("card-forecast");
+                    window.dispatchEvent(new Event('resize'));
                 }
                }
            }
@@ -1221,7 +1221,7 @@ async function loadGlobalShap() {
                },
                animation: {
                 onComplete: () => {
-                    forceGridResize("card-forecast");
+                    window.dispatchEvent(new Event('resize'));
                 }
                }
            }

templates/index.html

@@ -243,7 +243,7 @@ <h1>
           </div>
         </div>
 
-        <div class="grid-stack-item" id="card-forecast" gs-w="12" gs-h="8">
+        <div class="grid-stack-item auto-height" id="card-forecast" gs-w="12" gs-h="8">
           <div class="grid-stack-item-content">
             <div class="card card-light" style="height: 100%; box-sizing: border-box;">
               <div class="label">Prognose</div>