feat: resize observer

maltoze · Sep 26, 2023 · f6a0272 · f6a0272
1 parent 01302a3
commit f6a0272
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/src/entries/contentScript/primary/components/Controlbar.tsx b/src/entries/contentScript/primary/components/Controlbar.tsx
@@ -131,10 +131,21 @@ export default function Controlbar({ appRoot, onClose }: ControlbarProps) {
   const draggableNodeRef = useRef<HTMLDivElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
   const [containerBoundingRect, setContainerBoundingRect] = useState<DOMRect>()
+
   useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      const container = containerRef.current
+      if (container) {
+        setContainerBoundingRect(container.getBoundingClientRect())
+      }
+    })
+
     const container = containerRef.current
-    if (container) {
-      setContainerBoundingRect(container.getBoundingClientRect())
+    if (!container) return
+    resizeObserver.observe(container)
+
+    return () => {
+      resizeObserver.disconnect()
     }
   }, [])