Undo forecast card styling

Author: jacquesbach

static/css/style.css

@@ -195,13 +195,14 @@
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
     display: flex;
     flex-direction: column;
-    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 */
+    justify-content: center;
   }
 
+  background: var(--card-bg);
+
+  /* WICHTIG: Ändere 'center' auf 'flex-start' */
+
+
   .card-gradient {
     background: var(--gradient);
     color: white;

static/js/layout.js

@@ -85,37 +85,6 @@ 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. 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;
-
-    // 3. Gridstack Zellen-Metriken
-    const cellHeight = dashboardGrid.getCellHeight();
-    const margin = dashboardGrid.getOpts().margin || 20;
-
-    // 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. 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 () => {
     // --- PHASE 1: Das Gerüst aufbauen ---
     initGridstack();

static/js/script.js

@@ -1047,14 +1047,6 @@ 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() {
@@ -1161,27 +1153,23 @@ function showShapDetails(point) {
    const container = document.getElementById("shapForcePlot");
 
    // ===== ResizeObserver nur einmal registrieren =====
-   const cardItem = document.getElementById("card-forecast");
-   if (!cardItem._resizeObserverAttached) {
+   if (!container._resizeObserverAttached) {
+
        const observer = new ResizeObserver(() => {
-           // Wir nutzen einen winzigen Delay, damit Gridstack erst fertig zeichnet
-           clearTimeout(window._shapResizeTimer);
-           window._shapResizeTimer = setTimeout(() => {
-               if (window._lastShapPoint) {
-                   showShapDetails(window._lastShapPoint);
-               }
-           }, 50); 
+           if (window._lastShapPoint) {
+               showShapDetails(window._lastShapPoint);
+           }
        });
-       observer.observe(cardItem);
-       cardItem._resizeObserverAttached = true;
+
+       observer.observe(container);
+       container._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";
 
@@ -1415,5 +1403,4 @@ function showShapDetails(point) {
    }
 
    document.getElementById("seasonInterpretation").innerText = text;
-   resizeForecastCardToFit();
 }