Fix misaligned gap controls when justifyContent or alignContent is set (#6565)

**Problem:**
Gap controls are misaligned when justifyContent or alignContent is set,
e.g.:
<img width="337" alt="image"
src="https://github.com/user-attachments/assets/64150066-2114-4b20-84f3-fbedfce94840">


**Fix:**
GridRowHighlight (I renamed it to GridRowOrColumnHighlight) component
sets alignContent (when it is a column) or justifyContent (when it is a
row) to the value coming from the grid style.

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

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Author: gbalint

editor/src/components/canvas/controls/grid-controls-for-strategies.tsx

@@ -33,6 +33,7 @@ import {
 } from './grid-controls'
 import { isEdgePositionOnSide } from '../canvas-utils'
 import { findOriginalGrid } from '../canvas-strategies/strategies/grid-helpers'
+import type { AlignContent, FlexJustifyContent } from '../../inspector/inspector-common'
 
 export const GridCellTestId = (elementPath: ElementPath) => `grid-cell-${EP.toString(elementPath)}`
 
@@ -70,8 +71,8 @@ export type GridMeasurementHelperData = {
   gap: number | null
   rowGap: number | null
   columnGap: number | null
-  justifyContent: string | null
-  alignContent: string | null
+  justifyContent: FlexJustifyContent | null
+  alignContent: AlignContent | null
   padding: Sides
   columns: number
   cells: number

editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx

@@ -2,26 +2,21 @@ import type { CSSProperties } from 'react'
 import React from 'react'
 import { createArrayWithLength, interleaveArray } from '../../../../core/shared/array-utils'
 import type { GridAutoOrTemplateBase } from '../../../../core/shared/element-template'
-import type { CanvasVector, Size } from '../../../../core/shared/math-utils'
-import { size, windowPoint } from '../../../../core/shared/math-utils'
+import type { Size } from '../../../../core/shared/math-utils'
+import { size } from '../../../../core/shared/math-utils'
 import type { ElementPath } from '../../../../core/shared/project-file-types'
 import { assertNever } from '../../../../core/shared/utils'
-import { Modifier } from '../../../../utils/modifiers'
 import { when } from '../../../../utils/react-conditionals'
 import type { UtopiColor } from '../../../../uuiui'
 import { useColorTheme, UtopiaStyles } from '../../../../uuiui'
 import { CSSCursor } from '../../../../uuiui-deps'
-import type { EditorDispatch } from '../../../editor/action-types'
 import { useDispatch } from '../../../editor/store/dispatch-context'
 import { Substores, useEditorState, useRefEditorState } from '../../../editor/store/store-hook'
 import {
   cssNumber,
   printCSSNumber,
   stringifyGridDimension,
 } from '../../../inspector/common/css-utils'
-import CanvasActions from '../../canvas-actions'
-import { createInteractionViaMouse, gridGapHandle } from '../../canvas-strategies/interaction-state'
-import { windowToCanvasCoordinates } from '../../dom-lookup'
 import type { Axis } from '../../gap-utils'
 import { maybeGridGapData } from '../../gap-utils'
 import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
@@ -31,6 +26,7 @@ import { getGridHelperStyleMatchingTargetGrid } from '../grid-controls-helpers'
 import type { CSSNumberWithRenderedValue } from './controls-common'
 import { CanvasLabel, PillHandle, useHoverWithDelay } from './controls-common'
 import { startGapControlInteraction } from './grid-gap-control-helpers'
+import type { AlignContent, FlexJustifyContent } from '../../../inspector/inspector-common'
 
 export interface GridGapControlProps {
   selectedElement: ElementPath
@@ -187,7 +183,7 @@ export const GridPaddingOutlineForDimension = (props: {
       {createArrayWithLength(length, (index) => {
         const hide = index === 0 || index === length - 1 || index % 2 === 0
         return (
-          <GridRowHighlight
+          <GridRowOrColumnHighlight
             key={index}
             hide={hide} // we only want to show the divs that fall in where the gaps are in the original grid
             gapId={`${dimension}-${index}`}
@@ -202,6 +198,8 @@ export const GridPaddingOutlineForDimension = (props: {
             beingDragged={beingDragged}
             onMouseOver={onMouseOver}
             elementHovered={elementHovered}
+            gridJustifyContent={grid.justifyContent}
+            gridAlignContent={grid.alignContent}
             draggedOutlineColor={draggedOutlineColor}
           />
         )
@@ -210,7 +208,7 @@ export const GridPaddingOutlineForDimension = (props: {
   )
 }
 
-const GridRowHighlight = (props: {
+const GridRowOrColumnHighlight = (props: {
   gapId: string
   onMouseDown: React.MouseEventHandler
   hide: boolean
@@ -222,6 +220,8 @@ const GridRowHighlight = (props: {
   beingDragged: boolean
   onMouseOver: () => void
   elementHovered: boolean
+  gridJustifyContent: FlexJustifyContent | null
+  gridAlignContent: AlignContent | null
   draggedOutlineColor?: UtopiColor
 }) => {
   const {
@@ -236,6 +236,8 @@ const GridRowHighlight = (props: {
     beingDragged,
     onMouseOver,
     elementHovered,
+    gridJustifyContent,
+    gridAlignContent,
     draggedOutlineColor,
   } = props
 
@@ -302,8 +304,8 @@ const GridRowHighlight = (props: {
         boxShadow: `inset 0 0 0 ${lineWidth}px ${outlineColor}`,
         opacity: hide ? 0 : 1,
 
-        alignItems: 'center',
-        justifyContent: 'center',
+        alignContent: axis === 'row' ? undefined : gridAlignContent ?? undefined,
+        justifyContent: axis === 'row' ? gridJustifyContent ?? undefined : undefined,
         placeItems: 'center',
 
         gap: gap ?? 0,