Show other snappable lines during grid ruler resize (#6722)

**Problem:**

During grid ruler resize the other "snappable" lines for the axis should
be shown on the grid instead of the full grid placeholders.

**Fix:**

This PR extends the previous snapline code to include lines for the
other columns/rows in the current axis, because the regular placeholders
would show too much information.

As a future extension it would make sense to show the lines in between
any gap that may have been defined on the axis.

| Before | After |
|--------|---------|
| ![Kapture 2024-12-12 at 17 39
11](https://github.com/user-attachments/assets/278b1f7d-e1b1-4143-b12e-70ff9fdb85b3)
| ![Kapture 2024-12-12 at 17 37
59](https://github.com/user-attachments/assets/f64b361d-091c-433f-994a-b3f2954ceaec)
|

**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

Fixes #6721

editor/src/components/canvas/canvas-strategies/strategies/grid-element-change-location-strategy.spec.browser2.tsx

@@ -1230,11 +1230,13 @@ export var storyboard = (
       data-label='Playground'
       data-uid='scene'
     >
-      <Grid
+      <div
         style={{
-          position: 'absolute',
-          left: 31,
-          top: 0,
+          display: 'grid',
+          gridTemplateRows: '75px 75px 75px 75px',
+          gridTemplateColumns:
+            '50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px',
+          gridGap: 16,
         }}
         data-uid='grid'
       >
@@ -1277,37 +1279,10 @@ export var storyboard = (
           }}
           data-uid='ddd'
         />
-      </Grid>
+      </div>
     </Scene>
   </Storyboard>
 )
-
-export function Grid(props) {
-  return (
-    <div
-      style={{
-        ...props.style,
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      <div
-        style={{
-          display: 'grid',
-          gridTemplateRows: '75px 75px 75px 75px',
-          gridTemplateColumns:
-            '50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px',
-          gridGap: 16,
-        }}
-      >
-        {props.children}
-      </div>
-      <div
-        style={{ height: 100 }}
-      />
-    </div>
-  )
-}
 `
 
 const ProjectCodeReorderwithMultiCellChildShorthand = `import * as React from 'react'

editor/src/components/canvas/canvas-strategies/strategies/grid-reorder-strategy.spec.browser2.tsx

@@ -377,9 +377,15 @@ export var storyboard = (
       data-label='Playground'
       data-uid='scene'
     >
-      <Grid
+      <div
         style={{
-          backgroundColor: '#aaaaaa33',
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr',
+          gridTemplateRows: '1fr 1fr 1fr',
+          gridGap: 10,
+          width: 500,
+          height: 500,
+          padding: 10,
         }}
         data-testid='grid'
         data-uid='grid'
@@ -424,42 +430,10 @@ export var storyboard = (
           data-testid='blue'
           data-label='blue'
         />
-      </Grid>
+      </div>
     </Scene>
   </Storyboard>
 )
-
-export function Grid(props) {
-  return (
-    <div
-      style={{
-        ...props.style,
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-      data-uid='43adc9c0cf5a0bbf66c67e2e37466c18'
-    >
-      <div
-        style={{
-          display: 'grid',
-          gridTemplateColumns: '1fr 1fr 1fr',
-          gridTemplateRows: '1fr 1fr 1fr',
-          gridGap: 10,
-          width: 500,
-          height: 500,
-          padding: 10,
-        }}
-        data-uid='f84914f31dbc6c5d9b44c11ae54139ef'
-      >
-        {props.children}
-      </div>
-      <div
-        style={{ height: 100 }}
-        data-uid='f5827ce0f04916c792a1da2bd69b6cad'
-      />
-    </div>
-  )
-}
 `
 
 const ProjectCodeReorderWithComponentItem = `import * as React from 'react'

editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategies.spec.browser2.tsx

@@ -4,7 +4,7 @@ import type { WindowPoint } from '../../../../core/shared/math-utils'
 import { offsetPoint, windowPoint } from '../../../../core/shared/math-utils'
 import type { Modifiers } from '../../../../utils/modifiers'
 import { cmdModifier } from '../../../../utils/modifiers'
-import { selectComponentsForTest, wait } from '../../../../utils/utils.test-utils'
+import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
 import { GridCellTestId } from '../../controls/grid-controls-for-strategies'
 import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
 import type { Point } from '../../event-helpers.test-utils'
@@ -954,7 +954,7 @@ export var storyboard = (
         left: 100,
         top: 100,
         width: 300,
-        height: 300,      
+        height: 300,
         padding: 10,
       }}
       data-uid='grid'

editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-ruler-strategy.ts

@@ -16,7 +16,6 @@ import { assertNever } from '../../../../core/shared/utils'
 import { gridContainerIdentifier, gridItemIdentifier } from '../../../editor/store/editor-state'
 import { isCSSKeyword } from '../../../inspector/common/css-utils'
 import {
-  controlsForGridPlaceholders,
   controlsForGridRulers,
   GridResizeControls,
 } from '../../controls/grid-controls-for-strategies'
@@ -82,7 +81,6 @@ export const gridResizeElementRulerStrategy: CanvasStrategyFactory = (
         key: `grid-resize-controls-${EP.toString(selectedElement)}`,
         show: 'always-visible',
       },
-      controlsForGridPlaceholders(gridItemIdentifier(selectedElement)),
       controlsForGridRulers(gridItemIdentifier(selectedElement)),
     ],
     fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_RESIZE_RULER_HANDLE', 1),