fix(resize): fix the position of the drag, and set a minimum width/height

libs/shared/lib/components/Resizable.tsx

@@ -54,15 +54,23 @@ export const Resizable = ({
     setDragging(false);
     window.removeEventListener('mouseup', onMouseUp);
   };
+
   function onMouseMove(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
     if (dragging) {
-      if (horizontal && ref.current) {
+      if (ref.current) {
         const rect = ref.current.getBoundingClientRect();
-        setFirstSize(e.clientX);
-        setSecondSize(rect.width - e.clientX);
-      } else {
-        setFirstSize(e.clientY);
-        setSecondSize(window.innerHeight - e.clientY);
+        const relativeX = e.clientX - rect.left;
+        const relativeY = e.clientY - rect.top;
+        const minSizeX = 16;
+        const minSizeY = 28;
+
+        if (horizontal) {
+          setFirstSize(Math.max(minSizeX, relativeX));
+          setSecondSize(Math.max(minSizeX, rect.width - relativeX));
+        } else {
+          setFirstSize(Math.max(minSizeY, relativeY));
+          setSecondSize(Math.max(minSizeY, rect.height - relativeY));
+        }
       }
     }
   }