Undo auto resize

Author: jacquesbach

static/css/style.css

@@ -162,14 +162,15 @@
     margin-left: -20px;
     margin-right: -20px;
   }
-
+  
   .grid-stack-item-content {
-    height: 100%;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overflow: visible !important;
     background: transparent !important;
     box-shadow: none !important;
   }
-
+  
   .edit-mode .grid-stack-item-content {
     cursor: grab;
     border: 1px dashed var(--accent);
@@ -195,19 +196,14 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    height: 100%;
-  }
-  
-  .card canvas {
-    width: 100% !important;
   }
 
   .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,16 +15,6 @@ 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)
@@ -95,58 +85,10 @@ 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,6 +1151,20 @@ 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";