Fix resize detector sizes

src/components/dice/DiceInteraction.tsx

@@ -192,7 +192,12 @@ function DiceInteraction({
       }}
       ref={containerRef}
     >
-      <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
+      <ReactResizeDetector
+        handleWidth
+        handleHeight
+        onResize={handleResize}
+        targetRef={containerRef}
+      >
         <canvas
           onPointerDown={handlePointerDown}
           onPointerUp={handlePointerUp}

src/components/map/MapEditor.tsx

@@ -136,7 +136,12 @@ function MapEditor({ map, onSettingsChange }: MapEditorProps) {
           bg="muted"
           ref={containerRef}
         >
-          <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
+          <ReactResizeDetector
+            handleWidth
+            handleHeight
+            onResize={handleResize}
+            targetRef={containerRef}
+          >
             <KonvaBridge
               stageRender={(children: React.ReactNode) => (
                 <Stage

src/components/map/MapInteraction.tsx

@@ -210,7 +210,12 @@ function MapInteraction({
           ref={containerRef}
           className="map"
         >
-          <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
+          <ReactResizeDetector
+            handleWidth
+            handleHeight
+            onResize={handleResize}
+            targetRef={containerRef}
+          >
             <KonvaBridge
               stageRender={(children) => (
                 <Stage

src/components/tile/TilesOverlay.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { Box, Close, Grid, useThemeUI, IconButton, Text, Flex } from "theme-ui";
 import { useSpring, animated, config } from "react-spring";
 import ReactResizeDetector from "react-resize-detector";
@@ -42,6 +42,7 @@ function TilesOverlay({ modalSize, children }: TilesOverlayProps) {
     config: config.gentle,
   });
 
+  const containerRef = useRef<HTMLDivElement>(null);
   const [containerSize, setContinerSize] = useState({ width: 0, height: 0 });
   function handleContainerResize(width?: number, height?: number) {
     if (width && height) {
@@ -76,11 +77,13 @@ function TilesOverlay({ modalSize, children }: TilesOverlayProps) {
           top: 0,
         }}
         bg="overlay"
+        ref={containerRef}
       />
       <ReactResizeDetector
         handleWidth
         handleHeight
         onResize={handleContainerResize}
+        targetRef={containerRef}
       >
         <animated.div
           style={{

src/components/token/TokenPreview.tsx

@@ -93,7 +93,12 @@ function TokenPreview({ token }: TokenPreviewProps) {
       bg="muted"
       ref={containerRef}
     >
-      <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
+      <ReactResizeDetector
+        handleWidth
+        handleHeight
+        onResize={handleResize}
+        targetRef={containerRef}
+      >
         <Stage
           width={stageWidth}
           height={stageHeight}