Correct Grid Column Gap Indicator Position (#6592)

- Apply the same positioning for column gaps as was implemented for row gaps.
concrete-utopia · Dec 13, 2024 · a37eed6 · a37eed6
1 parent 00ed3e6
commit a37eed6
Showing 1 changed file with 7 additions and 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
@@ -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}