From 8fcc7e19fec81c8fa221637ca62f5431b92440a1 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Thu, 4 Aug 2022 18:51:01 +0100
Subject: [PATCH] Prevent resizing row child element completely over adjacent
 element (#732)

Prevent resizing row child element over adjacent element
---
 .../PageEditor/RenderPanel/RenderOverlay.tsx  | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx
index 3f15a8d5102..e68f68ca7d5 100644
--- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx
+++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx
@@ -1137,9 +1137,14 @@ export default function RenderOverlay({ canvasHostRef }: RenderOverlayProps) {
 
           const minGridColumnWidth = overlayGridRef.current.getMinColumnWidth();
 
+          const previousSibling = appDom.getSiblingBeforeNode(dom, draggedNode, 'children');
+          const previousSiblingInfo = previousSibling && nodesInfo[previousSibling.id];
+          const previousSiblingRect = previousSiblingInfo?.rect;
+
           if (
             draggedEdge === RECTANGLE_EDGE_LEFT &&
-            cursorPos.x > parentRect.x + minGridColumnWidth &&
+            cursorPos.x >
+              Math.max(parentRect.x, previousSiblingRect?.x || 0) + minGridColumnWidth &&
             cursorPos.x < draggedNodeRect.x + draggedNodeRect.width - minGridColumnWidth
           ) {
             const updatedTransformScale =
@@ -1148,10 +1153,20 @@ export default function RenderOverlay({ canvasHostRef }: RenderOverlayProps) {
             resizePreviewElement.style.transformOrigin = '100% 50%';
             resizePreviewElement.style.transform = `scaleX(${updatedTransformScale})`;
           }
+
+          const nextSibling = appDom.getSiblingAfterNode(dom, draggedNode, 'children');
+          const nextSiblingInfo = nextSibling && nodesInfo[nextSibling.id];
+          const nextSiblingRect = nextSiblingInfo?.rect;
+
           if (
             draggedEdge === RECTANGLE_EDGE_RIGHT &&
             cursorPos.x > draggedNodeRect.x + minGridColumnWidth &&
-            cursorPos.x < parentRect.x + parentRect.width - minGridColumnWidth
+            cursorPos.x <
+              Math.min(
+                parentRect.x + parentRect.width,
+                nextSiblingRect ? nextSiblingRect?.x + nextSiblingRect?.width : 0,
+              ) -
+                minGridColumnWidth
           ) {
             const updatedTransformScale = snappedToGridCursorRelativePosX / draggedNodeRect.width;