From cefaa78709d5d710a7bf57c06c8040579425d73e Mon Sep 17 00:00:00 2001
From: TimBryanDev <hi@timbryan.dev>
Date: Fri, 6 Oct 2023 14:48:06 +0100
Subject: [PATCH 1/2] :bug: when the window resizes, ensure the current width
 is still within the min/max

---
 lib/Resizable/index.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/lib/Resizable/index.tsx b/lib/Resizable/index.tsx
index a86c7de65..7b3035aeb 100644
--- a/lib/Resizable/index.tsx
+++ b/lib/Resizable/index.tsx
@@ -111,11 +111,18 @@ export function Resizable(props: PropsWithChildren<ResizableProps>) {
 
   useEffect(() => {
     doResize(rememberPosition ? lastPosition : initialWidth);
-
-    // remember to remove global listeners on dismount
+    // remember to remove global listeners on unmounting
     return () => stopDrag();
   }, []);
 
+  useEffect(() => {
+    const handeWindowResize = () => doResize(getWrapperWidth() + gutterSize);
+    window.addEventListener("resize", handeWindowResize);
+    return () => {
+      window.removeEventListener("resize", handeWindowResize);
+    };
+  }, []);
+
   return (
     <div ref={resizeRef} className="resizable">
       <div ref={resizeWrapperRef} className="resizable__wrapper">

From 056e5802195c8e05af9a902d47940b0d30ece74e Mon Sep 17 00:00:00 2001
From: TimBryanDev <hi@timbryan.dev>
Date: Fri, 6 Oct 2023 14:49:24 +0100
Subject: [PATCH 2/2] :recycle: more accurate function names

---
 lib/Resizable/index.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/lib/Resizable/index.tsx b/lib/Resizable/index.tsx
index 7b3035aeb..a228f9f2f 100644
--- a/lib/Resizable/index.tsx
+++ b/lib/Resizable/index.tsx
@@ -40,14 +40,14 @@ export function Resizable(props: PropsWithChildren<ResizableProps>) {
     initialWidth
   );
 
-  const containerWidth = () =>
+  const getContainerWidth = () =>
     toPixels(props.containerWidth ?? document.body.offsetWidth);
 
-  const minWidth = () =>
-    toPixels(props.minResizableWidth ?? 0, containerWidth());
+  const getMinWidth = () =>
+    toPixels(props.minResizableWidth ?? 0, getContainerWidth());
 
-  const maxWidth = () =>
-    toPixels(props.maxResizableWidth ?? "100%", containerWidth());
+  const getMaxWidth = () =>
+    toPixels(props.maxResizableWidth ?? "100%", getContainerWidth());
 
   const getWrapperWidth = () =>
     toPixels(resizeWrapperRef.current?.style.width ?? 0);
@@ -56,7 +56,7 @@ export function Resizable(props: PropsWithChildren<ResizableProps>) {
     if (resizeWrapperRef.current === null) return;
 
     const newWidth =
-      keepValueWithinRange(value, minWidth(), maxWidth()) - gutterSize;
+      keepValueWithinRange(value, getMinWidth(), getMaxWidth()) - gutterSize;
 
     resizeWrapperRef.current.style.width = `${newWidth}px`;
     setLastPosition(newWidth);