Change Forecast Card Styles

Author: jacquesbach

static/css/style.css

@@ -195,15 +195,17 @@
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start; 
+    height: 100%;
+    box-sizing: border-box;
   }
 
   .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

@@ -85,6 +85,32 @@ async function resetDatabaseLayout() {
     }
 }
 
+function resizeForecastCardToFit() {
+    if (!window.dashboardGrid) return;
+    
+    const gridItem = document.getElementById('card-forecast');
+    const innerCard = gridItem.querySelector('.card');
+    
+    if (!gridItem || !innerCard) return;
+
+    // 1. Wir erlauben der Karte kurz, ihre natürliche, volle Höhe anzunehmen
+    innerCard.style.height = 'auto';
+    const requiredHeightPx = innerCard.scrollHeight;
+    
+    // 2. Zurücksetzen für das Flex-Layout
+    innerCard.style.height = '100%';
+
+    // 3. Höhe einer einzelnen Gridstack-Zelle plus Margin abrufen
+    const cellHeight = dashboardGrid.getCellHeight(); 
+    const margin = dashboardGrid.getOpts().margin || 20;
+
+    // 4. Ausrechnen, wie viele "Blöcke" (h) wir brauchen, aufgerundet
+    const newH = Math.ceil((requiredHeightPx + margin) / (cellHeight + margin));
+
+    // 5. Gridstack anweisen, die neue Höhe anzuwenden
+    dashboardGrid.update(gridItem, { h: newH });
+}
+
 document.addEventListener("DOMContentLoaded", async () => {
     // --- PHASE 1: Das Gerüst aufbauen ---
     initGridstack();

static/js/script.js

@@ -1153,23 +1153,27 @@ function showShapDetails(point) {
    const container = document.getElementById("shapForcePlot");
 
    // ===== ResizeObserver nur einmal registrieren =====
-   if (!container._resizeObserverAttached) {
-
+   const cardItem = document.getElementById("card-forecast");
+   if (!cardItem._resizeObserverAttached) {
        const observer = new ResizeObserver(() => {
-           if (window._lastShapPoint) {
-               showShapDetails(window._lastShapPoint);
-           }
+           // Wir nutzen einen winzigen Delay, damit Gridstack erst fertig zeichnet
+           clearTimeout(window._shapResizeTimer);
+           window._shapResizeTimer = setTimeout(() => {
+               if (window._lastShapPoint) {
+                   showShapDetails(window._lastShapPoint);
+               }
+           }, 50); 
        });
-
-       observer.observe(container);
-       container._resizeObserverAttached = true;
+       observer.observe(cardItem);
+       cardItem._resizeObserverAttached = true;
    }
 
    container.innerHTML = "";
    container.style.position = "relative";
    container.style.display = "flex";
    container.style.alignItems = "center";
    container.style.justifyContent = "center";
+   container.style.width = "100%";
    container.style.height = "100px";
    container.style.overflow = "visible";
 
@@ -1403,4 +1407,5 @@ function showShapDetails(point) {
    }
 
    document.getElementById("seasonInterpretation").innerText = text;
+   resizeForecastCardToFit();
 }