Change Forecast Card Styles

Author: jacquesbach

static/css/style.css

@@ -198,14 +198,16 @@
     justify-content: flex-start; 
     height: 100%;
     box-sizing: border-box;
+    overflow: hidden; /* Verhindert das Auslaufen des Inhalts während der Animation */
+    transition: height 0.3s ease; /* Macht das Aufklappen geschmeidig */
   }
 
   .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

@@ -93,22 +93,27 @@ function resizeForecastCardToFit() {
 
     if (!gridItem || !innerCard) return;
 
-    // 1. Wir erlauben der Karte kurz, ihre natürliche, volle Höhe anzunehmen
+    // 1. Temporär feste Höhen lösen
     innerCard.style.height = 'auto';
+    innerCard.style.minHeight = 'auto';
+
+    // 2. Die tatsächliche Höhe messen
+    // Wir nehmen scrollHeight, um den Inhalt außerhalb des sichtbaren Bereichs zu erfassen
     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(); 
+    // 3. Gridstack Zellen-Metriken
+    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));
+    // 4. Berechnung der benötigten Rows (h)
+    // Wir addieren einen kleinen Puffer (10px) für Padding-Unterschiede
+    const newH = Math.ceil((requiredHeightPx + 10) / (cellHeight + margin));
 
-    // 5. Gridstack anweisen, die neue Höhe anzuwenden
+    // 5. Update ausführen
     dashboardGrid.update(gridItem, { h: newH });
+    
+    // 6. Zurück auf 100%, damit die Card-Klasse das Gridstack-Item wieder voll ausfüllt
+    innerCard.style.height = '100%';
 }
 
 document.addEventListener("DOMContentLoaded", async () => {

static/js/script.js

@@ -1047,6 +1047,14 @@ async function loadForecast() {
            }
        }
    });
+   // 1. Sicherstellen, dass die Details am Anfang ausgeblendet sind
+   document.getElementById("shapDetailCard").style.display = "none";
+
+   // 2. WICHTIG: Die Karte sofort an den Inhalt (Global SHAP etc.) anpassen
+   // Ein kleines Delay hilft, damit das Chart fertig gerendert ist
+   setTimeout(() => {
+       resizeForecastCardToFit();
+   }, 200);
 }
 
 async function loadFeatureImportance() {