Fix click to insert into grid (#6271)

## The problem with click-to-insert in grids:

Clicking in the center of the grid cell in the middle:
<img width="859" alt="image"
src="https://github.com/user-attachments/assets/2af97b44-ee50-4899-ab46-a5a45aa5ce6b">

## Fix
<img width="826" alt="image"
src="https://github.com/user-attachments/assets/af780ec5-75d8-46d8-b423-b0503e17f64f">

editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx

@@ -236,9 +236,9 @@ export var storyboard = (
         gridColumn: '2',
         gridRow: '1',
         height: '100px',
-        left: '33px',
+        left: '83px',
         position: 'absolute',
-        top: '50px',
+        top: '100px',
         width: '100px',
       })
     })

editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx

@@ -257,17 +257,16 @@ function getFrameForInsertion(
   offset: CanvasPoint,
 ): CanvasRectangle {
   if (interactionData.type === 'DRAG') {
-    const frame =
-      interactionData.drag ?? canvasVector({ x: defaultSize.width, y: defaultSize.height })
+    const origin = interactionData.drag ?? { x: defaultSize.width / 2, y: defaultSize.height / 2 }
 
-    return roundRectangleToNearestWhole(
-      canvasRectangle({
-        x: offset.x - frame.x,
-        y: offset.y - frame.y,
-        width: frame.x,
-        height: frame.y,
-      }),
-    )
+    const { x, y } = { x: offset.x - origin.x, y: offset.y - origin.y }
+
+    const { width, height } =
+      interactionData.drag == null
+        ? defaultSize
+        : { width: interactionData.drag.x, height: interactionData.drag.y }
+
+    return roundRectangleToNearestWhole(canvasRectangle({ x, y, width, height }))
   }
 
   if (interactionData.type === 'HOVER') {