From a8363ab53f612ecad0203d47253f0674c5ff8580 Mon Sep 17 00:00:00 2001
From: Adam Gastineau <adam@agg.im>
Date: Fri, 13 Dec 2024 06:31:55 -0800
Subject: [PATCH] Move Dialog with resize/zoom events

---
 .../trace-viewer/src/ui/shared/dialog.tsx     | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/trace-viewer/src/ui/shared/dialog.tsx b/packages/trace-viewer/src/ui/shared/dialog.tsx
index 8e74c97b85..8a9ee56ff7 100644
--- a/packages/trace-viewer/src/ui/shared/dialog.tsx
+++ b/packages/trace-viewer/src/ui/shared/dialog.tsx
@@ -37,6 +37,10 @@ export const Dialog: React.FC<React.PropsWithChildren<DialogProps>> = ({
 }) => {
   const dialogRef = React.useRef<HTMLDialogElement>(null);
 
+  // Allow window dimension changes to force a rerender
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, setRecalculateDimensionsCount] = React.useState(0);
+
   let style: React.CSSProperties | undefined = undefined;
 
   if (hostingElement?.current) {
@@ -83,14 +87,19 @@ export const Dialog: React.FC<React.PropsWithChildren<DialogProps>> = ({
     return () => {};
   }, [open, requestClose]);
 
+  React.useEffect(() => {
+    const onResize = () => setRecalculateDimensionsCount(count => count + 1);
+
+    window.addEventListener('resize', onResize);
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, []);
+
   return (
     open && (
-      <dialog
-        ref={dialogRef}
-        style={style}
-        className={className}
-        open
-      >
+      <dialog ref={dialogRef} style={style} className={className} open>
         {children}
       </dialog>
     )