From 8e8e8007608b463f633367159b91b3eb001c43be Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Sat, 17 Jul 2021 20:37:09 +1000
Subject: [PATCH] Fix resize detector sizes

---
 src/components/dice/DiceInteraction.tsx | 7 ++++++-
 src/components/map/MapEditor.tsx        | 7 ++++++-
 src/components/map/MapInteraction.tsx   | 7 ++++++-
 src/components/tile/TilesOverlay.tsx    | 5 ++++-
 src/components/token/TokenPreview.tsx   | 7 ++++++-
 5 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/components/dice/DiceInteraction.tsx b/src/components/dice/DiceInteraction.tsx
index 416acae..2b66656 100644
--- a/src/components/dice/DiceInteraction.tsx
+++ b/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}
diff --git a/src/components/map/MapEditor.tsx b/src/components/map/MapEditor.tsx
index ff1baf2..57261a4 100644
--- a/src/components/map/MapEditor.tsx
+++ b/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
diff --git a/src/components/map/MapInteraction.tsx b/src/components/map/MapInteraction.tsx
index 77cba12..5bdc052 100644
--- a/src/components/map/MapInteraction.tsx
+++ b/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
diff --git a/src/components/tile/TilesOverlay.tsx b/src/components/tile/TilesOverlay.tsx
index c671136..79c5761 100644
--- a/src/components/tile/TilesOverlay.tsx
+++ b/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={{
diff --git a/src/components/token/TokenPreview.tsx b/src/components/token/TokenPreview.tsx
index 0d286db..002e778 100644
--- a/src/components/token/TokenPreview.tsx
+++ b/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}