From 15efb0f235a508ce94830e2e9154e506d9edb6bd Mon Sep 17 00:00:00 2001
From: imagineer99 <samleejackson0@gmail.com>
Date: Fri, 6 Mar 2026 07:13:44 +0000
Subject: [PATCH] fix: harden chart container sizing with legacy event rechecks

---
 studio/frontend/src/components/ui/chart.tsx | 46 ++++++---------------
 1 file changed, 13 insertions(+), 33 deletions(-)

diff --git a/studio/frontend/src/components/ui/chart.tsx b/studio/frontend/src/components/ui/chart.tsx
index dd0dcee48a..427cede136 100644
--- a/studio/frontend/src/components/ui/chart.tsx
+++ b/studio/frontend/src/components/ui/chart.tsx
@@ -67,12 +67,12 @@ function ChartContainer({
           : null;
 
       setContainerSize((currentSize) => {
-        if (!currentSize && !nextSize) {
+        if (!nextSize) {
+          // Keep the last valid size once mounted to avoid unmount/remount thrash.
           return currentSize;
         }
         if (
           currentSize &&
-          nextSize &&
           currentSize.width === nextSize.width &&
           currentSize.height === nextSize.height
         ) {
@@ -80,45 +80,25 @@ function ChartContainer({
         }
         return nextSize;
       });
-
-      return nextSize !== null;
     };
 
-    const hasInitialSize = updateSizeState();
+    updateSizeState();
 
     if (typeof ResizeObserver === "undefined") {
-      const handleWindowResize = () => {
-        updateSizeState();
+      const recheckSize = () => {
+        if (document.visibilityState === "visible") {
+          updateSizeState();
+        }
       };
 
-      window.addEventListener("resize", handleWindowResize);
-      window.addEventListener("orientationchange", handleWindowResize);
-
-      let retryId: number | null = null;
-      if (!hasInitialSize) {
-        let retries = 0;
-        const maxRetries = 40;
-        retryId = window.setInterval(() => {
-          const hasMeasuredSize = updateSizeState();
-          retries += 1;
-          if (hasMeasuredSize && retryId !== null) {
-            window.clearInterval(retryId);
-            retryId = null;
-            return;
-          }
-          if (retries >= maxRetries && retryId !== null) {
-            window.clearInterval(retryId);
-            retryId = null;
-          }
-        }, 250);
-      }
+      window.addEventListener("resize", recheckSize);
+      window.addEventListener("orientationchange", recheckSize);
+      document.addEventListener("visibilitychange", recheckSize);
 
       return () => {
-        window.removeEventListener("resize", handleWindowResize);
-        window.removeEventListener("orientationchange", handleWindowResize);
-        if (retryId !== null) {
-          window.clearInterval(retryId);
-        }
+        window.removeEventListener("resize", recheckSize);
+        window.removeEventListener("orientationchange", recheckSize);
+        document.removeEventListener("visibilitychange", recheckSize);
       };
     }