diff --git a/libs/shared/lib/components/Resizable.tsx b/libs/shared/lib/components/Resizable.tsx
index 8fb998b292232b5572746b281d60af4c9bbb93e4..6f6ec6e11a752a15a0d2dfe73e6c05992f0d67a1 100644
--- a/libs/shared/lib/components/Resizable.tsx
+++ b/libs/shared/lib/components/Resizable.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 type Props = {
   children: React.ReactNode;
@@ -31,6 +31,19 @@ export const Resizable = ({
   const [firstSize, setFirstSize] = React.useState<number>(0);
   const [secondSize, setSecondSize] = React.useState<number>(0);
   const [dragging, setDragging] = React.useState<boolean>(false);
+  const [windowSize, setWindowSize] = useState({ width: window.innerWidth, height: window.innerHeight });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
 
   useEffect(() => {
     if (ref.current) {
@@ -44,7 +57,7 @@ export const Resizable = ({
         setSecondSize(rect.height * (1 / _defaultProportion) - divisorSize);
       }
     }
-  }, [ref.current]);
+  }, [ref.current, windowSize]);
 
   function onMouseDown(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
     setDragging(true);