chore(components): 🛠 Update OverlayChart.tsx

frontend/src/components/OverlayChart.tsx

@@ -371,30 +371,55 @@ export function OverlayChart({
     const container = containerRef.current;
     if (!container) return;
 
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const { width: containerWidth, height: containerHeight } = entry.contentRect;
-        if (containerWidth > 0) {
-          // When fillHeight is enabled and container has height, use it
-          // Otherwise fall back to aspect ratio calculation
-          if (fillHeight && containerHeight > 0) {
-            setDimensions({
+    const measureContainer = () => {
+      const rect = container.getBoundingClientRect();
+      const containerWidth = rect.width;
+      const containerHeight = rect.height;
+
+      if (containerWidth > 0) {
+        // When fillHeight is enabled and container has height, use it
+        // Otherwise fall back to aspect ratio calculation
+        if (fillHeight && containerHeight > 0) {
+          setDimensions((prev) => {
+            // Only update if dimensions actually changed
+            if (prev.width === Math.round(containerWidth) && prev.height === Math.round(containerHeight)) {
+              return prev;
+            }
+            return {
               width: Math.round(containerWidth),
               height: Math.round(containerHeight),
-            });
-          } else {
-            const aspectRatio = containerWidth < 500 ? 0.55 : 0.5;
-            setDimensions({
+            };
+          });
+        } else {
+          const aspectRatio = containerWidth < 500 ? 0.55 : 0.5;
+          const newHeight = Math.round(containerWidth * aspectRatio);
+          setDimensions((prev) => {
+            if (prev.width === Math.round(containerWidth) && prev.height === newHeight) {
+              return prev;
+            }
+            return {
               width: Math.round(containerWidth),
-              height: Math.round(containerWidth * aspectRatio),
-            });
-          }
+              height: newHeight,
+            };
+          });
         }
       }
+    };
+
+    // Measure after layout completes (flex heights need a frame to settle)
+    const rafId = requestAnimationFrame(() => {
+      requestAnimationFrame(measureContainer);
+    });
+
+    const resizeObserver = new ResizeObserver(() => {
+      measureContainer();
     });
 
     resizeObserver.observe(container);
-    return () => resizeObserver.disconnect();
+    return () => {
+      cancelAnimationFrame(rafId);
+      resizeObserver.disconnect();
+    };
   }, [fillHeight]);
 
   const { width, height } = dimensions;