Grid resize fix striped area positioning and sizing (#6422)

**Problem:**

The grid resize striped area has two issues:

1. it is positioned and sized based on the container size and not the
actual grid template
2. it does not get positioned correctly when zoomed

**Fix:**

This PR fixes both issues.

| Before | After |
|--------|------------|
| ![Kapture 2024-09-27 at 15 02
14](https://github.com/user-attachments/assets/8d74f95c-7eec-43d3-9952-90d6dd77c567)
| ![Kapture 2024-09-27 at 15 00
47](https://github.com/user-attachments/assets/a4d52f24-430f-462c-9d07-52fa0208c2de)
|


Fixes #6421

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

@@ -157,10 +157,11 @@ export interface GridResizingControlProps {
   axis: Axis
   containingFrame: CanvasRectangle
   fromPropsAxisValues: GridAutoOrTemplateDimensions | null
-  padding: number | null
+  padding: number
   resizing: 'resize-target' | 'resize-generated' | 'not-resizing'
   setResizingIndex: (v: number | null) => void
   resizeLocked: boolean
+  stripedAreaLength: number | null
 }
 
 export const GridResizingControl = React.memo((props: GridResizingControlProps) => {
@@ -229,6 +230,11 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
       : props.containingFrame.width + GRID_RESIZE_HANDLE_CONTAINER_SIZE
   }, [props.containingFrame, props.axis])
 
+  const stripedAreaSkew = React.useMemo(
+    () => GRID_RESIZE_HANDLE_CONTAINER_SIZE / scale + props.padding,
+    [scale, props.padding],
+  )
+
   return (
     <div
       key={containerId}
@@ -280,10 +286,18 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
         <div
           style={{
             position: 'absolute',
-            top: props.axis === 'column' ? GRID_RESIZE_HANDLE_CONTAINER_SIZE : 0,
-            left: props.axis === 'row' ? GRID_RESIZE_HANDLE_CONTAINER_SIZE : 0,
-            right: 0,
-            bottom: 0,
+            top: props.axis === 'column' ? stripedAreaSkew : 0,
+            left: props.axis === 'row' ? stripedAreaSkew : 0,
+            right: props.axis === 'row' || props.stripedAreaLength == null ? undefined : 0,
+            width:
+              props.axis === 'row' && props.stripedAreaLength != null
+                ? props.stripedAreaLength
+                : undefined,
+            bottom: props.axis === 'column' || props.stripedAreaLength == null ? undefined : 0,
+            height:
+              props.axis === 'column' && props.stripedAreaLength != null
+                ? props.stripedAreaLength
+                : undefined,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
@@ -330,6 +344,7 @@ GridResizingControl.displayName = 'GridResizingControl'
 export interface GridResizingProps {
   axisValues: GridAutoOrTemplateBase | null
   fromPropsAxisValues: GridAutoOrTemplateBase | null
+  stripedAreaLength: number | null
   containingFrame: CanvasRectangle
   axis: Axis
   gap: number | null
@@ -429,6 +444,7 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
                 dimensionIndex={dimensionIndex}
                 dimension={dimension}
                 fromPropsAxisValues={fromProps}
+                stripedAreaLength={props.stripedAreaLength}
                 axis={props.axis}
                 containingFrame={props.containingFrame}
                 resizing={
@@ -444,8 +460,8 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
                   props.padding == null
                     ? 0
                     : props.axis === 'column'
-                    ? props.padding.left ?? 0
-                    : props.padding.top ?? 0
+                    ? props.padding.top ?? 0
+                    : props.padding.left ?? 0
                 }
               />
             )
@@ -552,6 +568,18 @@ export const GridRowColumnResizingControls =
   controlForStrategyMemoized<GridRowColumnResizingControlsProps>(({ target }) => {
     const grids = useGridData([target])
 
+    function getStripedAreaLength(template: GridAutoOrTemplateBase | null, gap: number) {
+      if (template?.type !== 'DIMENSIONS') {
+        return null
+      }
+      return template.dimensions.reduce((acc, curr, index) => {
+        if (curr.type === 'NUMBER') {
+          return acc + curr.value.value + (index > 0 ? gap : 0)
+        }
+        return acc
+      }, 0)
+    }
+
     return (
       <CanvasOffsetWrapper>
         {grids.flatMap((grid) => {
@@ -564,6 +592,7 @@ export const GridRowColumnResizingControls =
               axis={'column'}
               gap={grid.columnGap ?? grid.gap}
               padding={grid.padding}
+              stripedAreaLength={getStripedAreaLength(grid.gridTemplateRows, grid.gap ?? 0)}
             />
           )
         })}
@@ -577,6 +606,7 @@ export const GridRowColumnResizingControls =
               axis={'row'}
               gap={grid.rowGap ?? grid.gap}
               padding={grid.padding}
+              stripedAreaLength={getStripedAreaLength(grid.gridTemplateColumns, grid.gap ?? 0)}
             />
           )
         })}