From 55ab42136605fee26a821ea37d6a51fff948c41c Mon Sep 17 00:00:00 2001
From: Sean Parsons <217400+seanparsons@users.noreply.github.com>
Date: Mon, 28 Oct 2024 15:35:48 +0000
Subject: [PATCH] Correct Grid Column Gap Indicator Position (#6592)

- Apply the same positioning for column gaps as was implemented for row
gaps.
---
 .../grid-gap-control-component.tsx            | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
index ae1e6a05d8ce..c17bc5716353 100644
--- a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
+++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx
@@ -421,26 +421,21 @@ export function GridGapHandle({
     [onHandleHoverStartInner, index],
   )
 
-  const rowGapStyles =
-    axis === 'row'
-      ? ({
-          left: '50%',
-          top: '50%',
-          transform: 'translate(-50%, -50%)',
-          position: 'absolute',
-          gridArea: `1/${index + 1}/2/${index + 2}`,
-        } as const)
-      : {}
   return (
     <div
-      data-testid={`${GridGapControlHandleTestId}-${gapId}`}
+      data-testid={`${GridGapControlHandleTestId}-${gapId}-${index}`}
       style={{
         visibility: shouldShowHandle ? 'visible' : 'hidden',
         pointerEvents: 'all',
         padding: hitAreaPadding,
         cursor: axis === 'row' ? CSSCursor.GapNS : CSSCursor.GapEW,
         opacity: handleOpacity,
-        ...rowGapStyles,
+        left: '50%',
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+        position: 'absolute',
+        gridArea:
+          axis === 'row' ? `1/${index + 1}/2/${index + 2}` : `${index + 1}/1/${index + 2}/2`,
       }}
       onMouseDown={onMouseDown}
       onMouseEnter={onHandleHoverStart}