Fix scaling when zoomed in (#6280)

# [Example
project](https://utopia.fish/p/7f224c81-juvenile-consonant/?branch_name=fix-zoom-scaling)

## Problem
The Chrome 128 release changed how `zoom` works under the hood, which
had an impact on canvas control positioning.

## Fix
Update the canvas control positioning code to accomodate these changes
and reinstate tests that were disabled because of the changes to `zoom`.

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

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

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

@@ -452,8 +452,7 @@ describe('Snapping guidelines for absolutely moved element', () => {
     ])
   })
 
-  // Disabled because of the zoom problems introduced by the Chrome 128 release
-  xit('should line up appropriately with a scale of 4', async () => {
+  it('should line up appropriately with a scale of 4', async () => {
     const renderResult = await getGuidelineRenderResult(4)
 
     expect(await getGuidelineDimensions(renderResult, 'guideline-0')).toEqual({

editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx

@@ -2456,8 +2456,7 @@ export var storyboard = (
         expect(isBetween(span.clientHeight, 37, 39)).toBe(true)
       })
 
-      // Disabled because of the zoom problems introduced by the Chrome 128 release
-      xit('does not resize text elements past their intrinsic size when zoomed in', async () => {
+      it('does not resize text elements past their intrinsic size when zoomed in', async () => {
         const renderResult = await renderTestEditorWithCode(
           formatTestProjectCode(`
           import * as React from 'react'

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

@@ -317,12 +317,7 @@ function getGridCellUnderCursor(
     canvasState.canvasOffset,
   )
 
-  return getTargetCell(
-    customStrategyState.grid.targetCell,
-    canvasState.scale,
-    false,
-    mouseWindowPoint,
-  )
+  return getTargetCell(customStrategyState.grid.targetCell, false, mouseWindowPoint)
 }
 
 function getOffsetFromGridCell(

editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts

@@ -12,7 +12,6 @@ import type { CanvasVector, WindowRectangle } from '../../../../core/shared/math
 import {
   offsetPoint,
   rectContainsPoint,
-  scaleRect,
   windowRectangle,
   type WindowPoint,
 } from '../../../../core/shared/math-utils'
@@ -28,12 +27,12 @@ import * as EP from '../../../../core/shared/element-path'
 import { deleteProperties } from '../../commands/delete-properties-command'
 import { isCSSKeyword } from '../../../inspector/common/css-utils'
 
-export function getGridCellUnderMouse(mousePoint: WindowPoint, canvasScale: number) {
-  return getGridCellAtPoint(mousePoint, canvasScale, false)
+export function getGridCellUnderMouse(mousePoint: WindowPoint) {
+  return getGridCellAtPoint(mousePoint, false)
 }
 
-function getGridCellUnderMouseRecursive(mousePoint: WindowPoint, canvasScale: number) {
-  return getGridCellAtPoint(mousePoint, canvasScale, true)
+function getGridCellUnderMouseRecursive(mousePoint: WindowPoint) {
+  return getGridCellAtPoint(mousePoint, true)
 }
 
 const gridCellTargetIdPrefix = 'grid-cell-target-'
@@ -52,7 +51,6 @@ function isGridCellTargetId(id: string): boolean {
 
 function getGridCellAtPoint(
   windowPoint: WindowPoint,
-  canvasScale: number,
   duplicating: boolean,
 ): { id: string; coordinates: GridCellCoordinates; cellWindowRectangle: WindowRectangle } | null {
   function maybeRecursivelyFindCellAtPoint(
@@ -62,10 +60,7 @@ function getGridCellAtPoint(
     for (const element of elements) {
       if (isGridCellTargetId(element.id)) {
         const domRect = element.getBoundingClientRect()
-        const windowRect =
-          canvasScale > 1
-            ? scaleRect(windowRectangle(domRect), canvasScale)
-            : windowRectangle(domRect)
+        const windowRect = windowRectangle(domRect)
         if (rectContainsPoint(windowRect, windowPoint)) {
           return { element: element, cellWindowRectangle: windowRect }
         }
@@ -136,7 +131,6 @@ export function runGridRearrangeMove(
 
   const targetCellUnderMouse = getTargetCell(
     customState.targetCell,
-    canvasScale,
     duplicating,
     mouseWindowPoint,
   )?.gridCellCoordinates
@@ -314,14 +308,13 @@ export function setGridPropsCommands(
 
 export function getTargetCell(
   previousTargetCell: GridCellCoordinates | null,
-  canvasScale: number,
   duplicating: boolean,
   mouseWindowPoint: WindowPoint,
 ): { gridCellCoordinates: GridCellCoordinates; cellWindowRectangle: WindowRectangle } | null {
   let cell = previousTargetCell ?? null
   const cellUnderMouse = duplicating
-    ? getGridCellUnderMouseRecursive(mouseWindowPoint, canvasScale)
-    : getGridCellUnderMouse(mouseWindowPoint, canvasScale)
+    ? getGridCellUnderMouseRecursive(mouseWindowPoint)
+    : getGridCellUnderMouse(mouseWindowPoint)
   if (cellUnderMouse == null) {
     return null
   }

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

@@ -60,8 +60,7 @@ describe('grid rearrange move strategy', () => {
     })
   })
 
-  // Disabled because of the zoom problems introduced by the Chrome 128 release
-  xit('can rearrange elements on a grid (zoom in)', async () => {
+  it('can rearrange elements on a grid (zoom in)', async () => {
     const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
 
     const testId = 'aaa'
@@ -213,13 +212,13 @@ async function runMoveTest(
   await mouseDragFromPointToPoint(
     sourceGridCell,
     {
-      x: sourceRect.x * (props.scale > 1 ? props.scale : 1) + 10,
-      y: sourceRect.y * (props.scale > 1 ? props.scale : 1) + 10,
+      x: sourceRect.x + 10,
+      y: sourceRect.y + 10,
     },
     getRectCenter(
       localRectangle({
-        x: targetRect.x * (props.scale > 1 ? props.scale : 1),
-        y: targetRect.y * (props.scale > 1 ? props.scale : 1),
+        x: targetRect.x,
+        y: targetRect.y,
         width: targetRect.width,
         height: targetRect.height,
       }),

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

@@ -82,7 +82,7 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
       )
 
       let targetCell = customState.grid.targetCell
-      const cellUnderMouse = getGridCellUnderMouse(mouseWindowPoint, canvasState.scale)
+      const cellUnderMouse = getGridCellUnderMouse(mouseWindowPoint)
       if (cellUnderMouse != null) {
         targetCell = cellUnderMouse.coordinates
       }

editor/src/components/navigator/navigator-item/run-in-shard-2-component-picker-context-menu.spec.browser2.tsx

@@ -1387,7 +1387,9 @@ export var storyboard = (
       { x: 2, y: 2 },
     )
 
-    await mouseClickAtPoint(editor.renderedDOM.getByText('Column'), { x: 2, y: 2 })
+    const column = await waitFor(() => editor.renderedDOM.getByText('Column'))
+
+    await mouseClickAtPoint(column, { x: 2, y: 2 })
 
     // the element inside the map has been changed to a `div`
     expect(getPrintedUiJsCodeWithoutUIDs(editor.getEditorState()))

editor/src/core/shared/dom-utils.ts

@@ -283,7 +283,7 @@ export function getCanvasRectangleFromElement(
   withContent: 'without-text-content' | 'with-text-content' | 'only-text-content',
   rounding: 'nearest-half' | 'no-rounding',
 ): CanvasRectangle {
-  const scale = canvasScale < 1 ? 1 / canvasScale : 1
+  const scale = 1 / canvasScale
 
   const roundingFn = getRoundingFn(rounding)