fix: stacked resizable not properly resizing

libs/shared/lib/components/layout/Resizable.tsx

@@ -38,9 +38,14 @@ export const Resizable = ({
   useEffect(() => {
     const handleResize = () => {
       setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+      setTimeout(() => {
+        // Sometimes the window size is not updated immediately to the proper amount, so retry after 100ms
+        // setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+      }, 100);
     };
 
     window.addEventListener('resize', handleResize);
+    if (ref.current) new ResizeObserver(handleResize).observe(ref.current);
 
     return () => {
       window.removeEventListener('resize', handleResize);
@@ -54,11 +59,15 @@ export const Resizable = ({
     if (ref.current) {
       const rect = ref.current.getBoundingClientRect();
       if (horizontal) {
-        setFirstSize((rect.width - divisorSize) * currentProportion);
-        setSecondSize((rect.width - divisorSize) * (1 - currentProportion));
+        const newFirstSize = (rect.width - divisorSize) * currentProportion;
+        const newSecondSize = (rect.width - divisorSize) * (1 - currentProportion);
+        setFirstSize(newFirstSize);
+        setSecondSize(newSecondSize);
       } else {
-        setFirstSize((rect.height - divisorSize) * currentProportion);
-        setSecondSize((rect.height - divisorSize) * (1 - currentProportion));
+        const newFirstSize = (rect.height - divisorSize) * currentProportion;
+        const newSecondSize = (rect.height - divisorSize) * (1 - currentProportion);
+        setFirstSize(newFirstSize);
+        setSecondSize(newSecondSize);
       }
     }
   }, [ref.current, windowSize]);
@@ -123,7 +132,7 @@ export const Resizable = ({
         {firstSize > 0 && (
           <>
             <div
-              className={'h-full w-full' + (classNameLeft !== undefined ? classNameLeft : '')}
+              className={'h-full w-full flex-grow ' + (classNameLeft !== undefined ? classNameLeft : '')}
               style={horizontal ? { maxWidth: firstSize } : { maxHeight: firstSize }}
             >
               {children2[0]}
@@ -140,7 +149,7 @@ export const Resizable = ({
               onTouchCancel={onTouchCancel}
             ></div>
             <div
-              className={'h-full w-full' + (classNameRight !== undefined ? classNameRight : '')}
+              className={'h-full w-full flex-grow ' + (classNameRight !== undefined ? classNameRight : '')}
               style={horizontal ? { maxWidth: secondSize } : { maxHeight: secondSize }}
             >
               {children2[1]}