From 1bc4e0c5944619c2d478071a5cb1d09417389c6f Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Thu, 6 Jun 2024 11:18:05 -0700
Subject: [PATCH] Use resize observer to detect when the webview gets zoomed
 (#22)

I noticed that the display nodes weren't getting updated when the browser zoom level changed. I found that using ResizeObserver was a better mechanism to capture this signal.
---
 frontend/faraday/lib/TileLayout.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/faraday/lib/TileLayout.tsx b/frontend/faraday/lib/TileLayout.tsx
index f41b7f5c1..81413d526 100644
--- a/frontend/faraday/lib/TileLayout.tsx
+++ b/frontend/faraday/lib/TileLayout.tsx
@@ -131,16 +131,19 @@ export const TileLayout = <T,>({ layoutTreeStateAtom, className, renderContent,
     // Update the transforms on first render and again whenever the window resizes. I had to do a slightly hacky thing
     // because I noticed that the window handler wasn't updating when the callback changed so I remove it each time and
     // reattach the new callback.
-    const [prevUpdateTransforms, setPrevUpdateTransforms] = useState<() => void>(undefined);
+    const [resizeObserver, setResizeObserver] = useState<ResizeObserver>(undefined);
     useEffect(() => {
-        console.log("replace resize listener");
-        if (prevUpdateTransforms) window.removeEventListener("resize", prevUpdateTransforms);
-        window.addEventListener("resize", updateTransforms);
-        setPrevUpdateTransforms(updateTransforms);
-        return () => {
-            window.removeEventListener("resize", updateTransforms);
-        };
-    }, [updateTransforms]);
+        if (overlayContainerRef.current) {
+            console.log("replace resize listener");
+            if (resizeObserver) resizeObserver.disconnect();
+            const newResizeObserver = new ResizeObserver(updateTransforms);
+            newResizeObserver.observe(overlayContainerRef.current);
+            setResizeObserver(newResizeObserver);
+            return () => {
+                resizeObserver.disconnect();
+            };
+        }
+    }, [updateTransforms, overlayContainerRef]);
 
     // Ensure that we don't see any jostling in the layout when we're rendering it the first time.
     // `animate` will be disabled until after the transforms have all applied the first time.