Fix invalid size error in chart causing crashes due to temporary invalid dimensions during mount/update

src/components/simulation-chart.tsx

@@ -76,6 +76,11 @@ const SimulationChart = React.memo(({
   const containerRef = React.useRef<HTMLDivElement>(null);
   const { width: containerWidth } = useElementSize(containerRef, 150);
 
+  // Guard against invalid dimensions during initial render
+  const yAxisWidth = 80;
+  const minContainerWidth = yAxisWidth + 100; // Minimum 100px for chart area
+  const safeContainerWidth = Math.max(containerWidth, minContainerWidth);
+
   // Track current theme for chart styling
   const [isDarkTheme, setIsDarkTheme] = React.useState(false);
 
@@ -96,9 +101,8 @@ const SimulationChart = React.memo(({
     return () => observer.disconnect();
   }, []);
 
-  // Y-axis takes ~80px, scrollable area gets the rest
+  // Calculate scrollable width using safe container width
-  const yAxisWidth = 80;
+  const scrollableWidth = safeContainerWidth - yAxisWidth;
-  const scrollableWidth = containerWidth - yAxisWidth;
 
   // Calculate chart width for scrollable area
   const chartWidth = simDays <= dispDays
@@ -106,7 +110,7 @@ const SimulationChart = React.memo(({
     : Math.ceil((scrollableWidth / dispDays) * simDays);
 
   // Use shorter captions on narrow containers to reduce wrapping
-  const isCompactLabels = containerWidth < 640; // tweakable threshold for mobile
+  const isCompactLabels = safeContainerWidth < 640; // tweakable threshold for mobile
 
   // Precompute series labels with translations
   const seriesLabels = React.useMemo<Record<string, { full: string; short: string; display: string }>>(() => {
@@ -446,6 +450,15 @@ const SimulationChart = React.memo(({
     );
   }, [seriesLabels]);
 
+  // Don't render chart if dimensions are invalid (prevents crash during initialization)
+  if (chartWidth <= 0 || scrollableWidth <= 0) {
+    return (
+      <div ref={containerRef} className="flex-grow w-full flex flex-col overflow-y-hidden items-center justify-center text-muted-foreground">
+        <p>{t('loadingChart', { defaultValue: 'Loading chart...' })}</p>
+      </div>
+    );
+  }
+
   // Render the chart
   return (
     <div ref={containerRef} className="flex-grow w-full flex flex-col overflow-y-hidden">

src/hooks/useElementSize.ts

@@ -38,17 +38,25 @@ export function useElementSize<T extends HTMLElement>(
     const element = ref.current;
     if (!element) return;
 
-    // Set initial size
+    // Set initial size (guard against 0 dimensions)
-    setSize({
+    const initialWidth = element.clientWidth;
-      width: element.clientWidth,
+    const initialHeight = element.clientHeight;
-      height: element.clientHeight,
+
-    });
+    if (initialWidth > 0 && initialHeight > 0) {
+      setSize({
+        width: initialWidth,
+        height: initialHeight,
+      });
+    }
 
     // Use ResizeObserver for efficient element size tracking
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const { width, height } = entry.contentRect;
-        setSize({ width, height });
+        // Guard against invalid dimensions
+        if (width > 0 && height > 0) {
+          setSize({ width, height });
+        }
       }
     });