diff --git a/libs/shared/lib/components/Resizable.tsx b/libs/shared/lib/components/Resizable.tsx index 2fd89d32a6cb1028a73be297bed6a426fb9048fe..8fb998b292232b5572746b281d60af4c9bbb93e4 100644 --- a/libs/shared/lib/components/Resizable.tsx +++ b/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)); + } } } }