Merge pull request #1311 from Bynder/fix/GC-1464_on-window-resize-use…

…-correct-width

🐛  GC-1464 - On window resize ensure resized element shrinks too

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);
@@ -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">