From 9cc01ef6087491a3a7802b3c9fc28a60dcc75302 Mon Sep 17 00:00:00 2001
From: TimBryanDev <hi@timbryan.dev>
Date: Thu, 5 Oct 2023 15:52:13 +0100
Subject: [PATCH] :bug: calculate limits on the fly to account for changes in
 screen width

---
 lib/Resizable/index.tsx | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/lib/Resizable/index.tsx b/lib/Resizable/index.tsx
index df2ac107d..a86c7de65 100644
--- a/lib/Resizable/index.tsx
+++ b/lib/Resizable/index.tsx
@@ -23,13 +23,7 @@ export function Resizable(props: PropsWithChildren<ResizableProps>) {
     useGutterOffset = false,
   } = props;
   const initialWidth = toPixels(props.initialWidth ?? "50%");
-  const containerWidth: number = toPixels(
-    props.containerWidth ?? document.body.offsetWidth
-  );
   const gutterSize = useGutterOffset ? 16 : 0;
-  const minWidth = toPixels(props.minResizableWidth ?? 0, containerWidth);
-  const maxWidth = toPixels(props.maxResizableWidth ?? "100%", containerWidth);
-
   const doDragRef = useRef<(evt: MouseEvent) => void>(() => {});
   const stopDragRef = useRef<(evt: MouseEvent) => void>(() => {});
   const resizeRef = useRef<HTMLDivElement>(null);
@@ -46,13 +40,23 @@ export function Resizable(props: PropsWithChildren<ResizableProps>) {
     initialWidth
   );
 
-  const getWidth = () => toPixels(resizeWrapperRef.current?.style.width ?? 0);
+  const containerWidth = () =>
+    toPixels(props.containerWidth ?? document.body.offsetWidth);
+
+  const minWidth = () =>
+    toPixels(props.minResizableWidth ?? 0, containerWidth());
+
+  const maxWidth = () =>
+    toPixels(props.maxResizableWidth ?? "100%", containerWidth());
+
+  const getWrapperWidth = () =>
+    toPixels(resizeWrapperRef.current?.style.width ?? 0);
 
   const doResize = (value: number) => {
     if (resizeWrapperRef.current === null) return;
 
     const newWidth =
-      keepValueWithinRange(value, minWidth, maxWidth) - gutterSize;
+      keepValueWithinRange(value, minWidth(), maxWidth()) - gutterSize;
 
     resizeWrapperRef.current.style.width = `${newWidth}px`;
     setLastPosition(newWidth);
@@ -65,7 +69,7 @@ export function Resizable(props: PropsWithChildren<ResizableProps>) {
 
   const stopDrag = () => {
     if (onResizeComplete) {
-      onResizeComplete(getWidth() + gutterSize);
+      onResizeComplete(getWrapperWidth() + gutterSize);
     }
     document.removeEventListener("mousemove", doDragRef.current, false);
     document.removeEventListener("mouseup", stopDragRef.current, false);
@@ -77,7 +81,7 @@ export function Resizable(props: PropsWithChildren<ResizableProps>) {
 
       setState({
         startX: clientX,
-        startWidth: getWidth(),
+        startWidth: getWrapperWidth(),
       });
 
       doDragRef.current = doDrag;