Introduce Auto Card Resize

Author: jacquesbach

static/css/style.css

@@ -164,13 +164,12 @@
   }
 
   .grid-stack-item-content {
-    overflow-x: hidden;
-    overflow-y: auto;
-    overflow: visible !important;
+    height: 100%;
+    overflow: hidden;
     background: transparent !important;
     box-shadow: none !important;
   }
-  
+
   .edit-mode .grid-stack-item-content {
     cursor: grab;
     border: 1px dashed var(--accent);
@@ -196,19 +195,19 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    height: 100%;
+  }
+  
+  .card canvas {
+    width: 100% !important;
   }
-
-  background: var(--card-bg);
-
-  /* WICHTIG: Ändere 'center' auf 'flex-start' */
-
 
   .card-gradient {
     background: var(--gradient);
     color: white;
     box-shadow: 0 15px 35px rgba(255, 75, 114, 0.25);
   }
-
+  
   .card-gradient .label {
     color: rgba(255, 255, 255, 0.85);
     font-size: 0.9em;

static/js/layout.js

@@ -15,6 +15,16 @@ function initGridstack() {
     dashboardGrid.on('change', function(event, items) {
         saveLayout();
     });
+
+    dashboardGrid.on('resizestop', function(event, el) {
+        const charts = el.querySelectorAll("canvas");
+        charts.forEach(canvas => {
+            const chart = Chart.getChart(canvas);
+            if (chart) {
+                chart.resize();
+            }
+        });
+    });
 }
 
 // 2. Layout speichern (Nur in DB und nur wenn PW da ist)
@@ -85,10 +95,58 @@ async function resetDatabaseLayout() {
     }
 }
 
+function resizeGridItemToContent(gridItemId) {
+
+    const el = document.getElementById(gridItemId);
+    if (!el || !dashboardGrid) return;
+
+    const content = el.querySelector(".card");
+
+    const contentHeight = content.scrollHeight;
+
+    const cellHeight = dashboardGrid.getCellHeight();
+    const margin = dashboardGrid.opts.margin;
+
+    const newHeight = Math.ceil((contentHeight + margin) / cellHeight);
+
+    dashboardGrid.update(el, { h: newHeight });
+}
+
+function initAutoCardResize() {
+
+    const cards = document.querySelectorAll(".grid-stack-item");
+
+    const observer = new ResizeObserver(entries => {
+
+        entries.forEach(entry => {
+
+            const gridItem = entry.target.closest(".grid-stack-item");
+
+            if (!gridItem) return;
+
+            const id = gridItem.id;
+
+            resizeGridItemToContent(id);
+
+        });
+
+    });
+
+    cards.forEach(card => {
+
+        const content = card.querySelector(".card");
+
+        if (content) observer.observe(content);
+
+    });
+
+}
+
 document.addEventListener("DOMContentLoaded", async () => {
     // --- PHASE 1: Das Gerüst aufbauen ---
     initGridstack();
     await loadLayout(); // Wartet, bis Boxen aus DB oder LocalStorage da sind
+    initAutoCardResize();
 
     // --- PHASE 2: Startwerte für Datumsfelder setzen ---
     const t = new Date().toISOString().split('T')[0];

static/js/script.js

@@ -1151,20 +1151,6 @@ function showShapDetails(point) {
    };
 
    const container = document.getElementById("shapForcePlot");
-
-   // ===== ResizeObserver nur einmal registrieren =====
-   if (!container._resizeObserverAttached) {
-
-       const observer = new ResizeObserver(() => {
-           if (window._lastShapPoint) {
-               showShapDetails(window._lastShapPoint);
-           }
-       });
-
-       observer.observe(container);
-       container._resizeObserverAttached = true;
-   }
-
    container.innerHTML = "";
    container.style.position = "relative";
    container.style.display = "flex";