Fix parsing parent element container from props (#6681)

**Problem:**

The `parentContainerGridPropertiesFromProps` in the special size
measurements is incorrectly calcluated off of the computed style of the
parent. This results, among other issues, into the template being
serialized to its computed values whenever
`gridMoveStrategiesExtraCommands` is applied inside strategies (e.g.
right after moving a grid item).

**Fix:**

Try to use the parent element style directly when parsing.

| Before | After |
|--------|------------|
|
https://github.com/user-attachments/assets/3a3a62b4-c030-422d-bd69-d80e52a76ef5
|
https://github.com/user-attachments/assets/ffbc2c3e-e7b3-4812-b9b4-71d096030b94
|



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

Author: ruggi

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

@@ -1,6 +1,6 @@
 import * as EP from '../../../../core/shared/element-path'
 import { offsetPoint, windowPoint } from '../../../../core/shared/math-utils'
-import { selectComponentsForTest } from '../../../../utils/utils.test-utils'
+import { selectComponentsForTest, wait } from '../../../../utils/utils.test-utils'
 import CanvasActions from '../../canvas-actions'
 import { GridCellTestId } from '../../controls/grid-controls-for-strategies'
 import { mouseDownAtPoint, mouseMoveToPoint, mouseUpAtPoint } from '../../event-helpers.test-utils'
@@ -28,6 +28,34 @@ describe('grid element change location strategy', () => {
     })
   })
 
+  it('does not alter the grid template', async () => {
+    const editor = await renderTestEditorWithCode(
+      ProjectCodeFractionalTemplate,
+      'await-first-dom-report',
+    )
+
+    const testId = 'aaa'
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = await runGridMoveTest(
+      editor,
+      {
+        scale: 1,
+        gridPath: 'sb/scene/grid',
+        testId: testId,
+      },
+    )
+
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: '7',
+      gridColumnStart: '3',
+      gridRowEnd: '4',
+      gridRowStart: '2',
+    })
+
+    const grid = await editor.renderedDOM.findByTestId('grid')
+    expect(grid.style.gridTemplateColumns).toEqual('1fr 1fr 2fr 2fr 1fr 1fr')
+    expect(grid.style.gridTemplateRows).toEqual('1fr 1fr 2fr 1fr')
+  })
+
   describe('component items', () => {
     it('can change the location of components on a grid when component takes style prop', async () => {
       const editor = await renderTestEditorWithCode(
@@ -881,6 +909,87 @@ export var storyboard = (
 )
 `
 
+const ProjectCodeFractionalTemplate = `import * as React from 'react'
+import { Scene, Storyboard, Placeholder } from 'utopia-api'
+
+export var storyboard = (
+  <Storyboard data-uid='sb'>
+    <Scene
+      id='playground-scene'
+      commentId='playground-scene'
+      style={{
+        width: 847,
+        height: 895,
+        position: 'absolute',
+        left: 46,
+        top: 131,
+      }}
+      data-label='Playground'
+      data-uid='scene'
+    >
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateRows: '1fr 1fr 2fr 1fr',
+          gridTemplateColumns:
+            '1fr 1fr 2fr 2fr 1fr 1fr',
+          gridGap: 16,
+          height: 482,
+          width: 786,
+          position: 'absolute',
+          left: 31,
+          top: 0,
+        }}
+        data-uid='grid'
+		data-testid='grid'
+      >
+        <div
+          style={{
+            minHeight: 0,
+            backgroundColor: '#f3785f',
+            gridColumnEnd: 5,
+            gridColumnStart: 1,
+            gridRowEnd: 3,
+            gridRowStart: 1,
+          }}
+          data-uid='aaa'
+          data-testid='aaa'
+        />
+        <div
+          style={{
+            minHeight: 0,
+            backgroundColor: '#23565b',
+          }}
+          data-uid='bbb'
+          data-testid='bbb'
+        />
+        <Placeholder
+          style={{
+            minHeight: 0,
+            gridColumnEnd: 5,
+            gridRowEnd: 4,
+            gridColumnStart: 1,
+            gridRowStart: 3,
+            backgroundColor: '#0074ff',
+          }}
+          data-uid='ccc'
+        />
+        <Placeholder
+          style={{
+            minHeight: 0,
+            gridColumnEnd: 9,
+            gridRowEnd: 4,
+            gridColumnStart: 5,
+            gridRowStart: 3,
+          }}
+          data-uid='ddd'
+        />
+      </div>
+    </Scene>
+  </Storyboard>
+)
+`
+
 const makeProjectCodeWithItemComponent = (
   itemComponentCode: string,
 ) => `import * as React from 'react'

editor/src/components/canvas/dom-walker.ts

@@ -930,7 +930,9 @@ function getSpecialMeasurements(
       : null
 
   const containerGridPropertiesFromProps = getGridContainerProperties(element.style)
-  const parentContainerGridPropertiesFromProps = getGridContainerProperties(parentElementStyle)
+  const parentContainerGridPropertiesFromProps = getGridContainerProperties(
+    element.parentElement?.style ?? parentElementStyle,
+  )
   const containerGridProperties = getGridContainerProperties(computedStyle, {
     dynamicCols: isDynamicGridTemplate(containerGridPropertiesFromProps.gridTemplateColumns),
     dynamicRows: isDynamicGridTemplate(containerGridPropertiesFromProps.gridTemplateRows),