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
-  const yAxisWidth = 80;
-  const scrollableWidth = containerWidth - yAxisWidth;
+  // Calculate scrollable width using safe container width
+  const scrollableWidth = safeContainerWidth - 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">