From ccfbd50fe22d06801efe4fbe21e89fdf96f099ea Mon Sep 17 00:00:00 2001
From: Lilith <lilith@apricot.voyager.nasty.sh>
Date: Sat, 17 Jan 2026 14:00:41 -0800
Subject: [PATCH] =?UTF-8?q?chore(components):=20=F0=9F=9B=A0=20Update=20Ov?=
 =?UTF-8?q?erlayChart.tsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/OverlayChart.tsx | 57 +++++++++++++++++-------
 1 file changed, 41 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/OverlayChart.tsx b/frontend/src/components/OverlayChart.tsx
index 636a208..89cdf01 100644
--- a/frontend/src/components/OverlayChart.tsx
+++ b/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;