From 2c8299000c9c42ab0f0203fddc88c0d4d1b15747 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Tue, 3 Sep 2024 18:24:00 +0300
Subject: [PATCH] fix(grid): take row/column gap into consideration when
 drawing handlers (#6292)

**Problem:**
The cell resize handlers are sometimes located incorrectly when there is
a grid gap (the semi-transparent handlers over the cells)
<img width="700" alt="image"
src="https://github.com/user-attachments/assets/2e6ac883-d083-4fe7-a603-70680d1d25b6">

**Fix:**
Take `rowGap`/`columnGap` into consideration as well when positioning
the handles
<img width="919" alt="image"
src="https://github.com/user-attachments/assets/928b76db-278b-4b16-816b-e90c68b8e8ec">

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Preview mode
---
 editor/src/components/canvas/controls/grid-controls.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index cb620cde6d73..0df9c14776e2 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -470,7 +470,7 @@ export const GridRowColumnResizingControls =
               fromPropsAxisValues={grid.gridTemplateColumnsFromProps}
               containingFrame={grid.frame}
               axis={'column'}
-              gap={grid.gap}
+              gap={grid.columnGap ?? grid.gap}
               padding={grid.padding}
             />
           )
@@ -483,7 +483,7 @@ export const GridRowColumnResizingControls =
               fromPropsAxisValues={grid.gridTemplateRowsFromProps}
               containingFrame={grid.frame}
               axis={'row'}
-              gap={grid.gap}
+              gap={grid.rowGap ?? grid.gap}
               padding={grid.padding}
             />
           )