Scale ruler marker snap lines correctly (#6706)

**Problem:**

Scale is applied inconsistently on the snap line and its label during
ruler marker resizing.

**Fix:**

1. Make sure to scale the label container
2. Make sure the perceived size of the snapline stays the same
regardless of the zoom level

Fixes #[6705](#6705)

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

@@ -2684,19 +2684,24 @@ const SnapLine = React.memo(
     const labelHeight = 20
 
     const isColumn = props.edge === 'column-start' || props.edge === 'column-end'
+
+    const top = isColumn
+      ? props.container.y
+      : props.target.y + (props.edge === 'row-end' ? props.target.height : 0)
+    const left = !isColumn
+      ? props.container.x
+      : props.target.x + (props.edge === 'column-end' ? props.target.width : 0)
+
     return (
       <div
         style={{
           position: 'absolute',
-          width: isColumn ? 1 : props.container.width,
-          height: !isColumn ? 1 : props.container.height,
-          top: isColumn
-            ? props.container.y
-            : props.target.y + (props.edge === 'row-end' ? props.target.height : 0),
-          left: !isColumn
-            ? props.container.x
-            : props.target.x + (props.edge === 'column-end' ? props.target.width : 0),
+          width: isColumn ? 1 : props.container.width * canvasScale,
+          height: !isColumn ? 1 : props.container.height * canvasScale,
+          top: top * canvasScale,
+          left: left * canvasScale,
           backgroundColor: colorTheme.brandNeonPink.value,
+          zoom: 1 / canvasScale,
         }}
       >
         {when(
@@ -2711,15 +2716,14 @@ const SnapLine = React.memo(
               textAlign: axis === 'row' ? 'right' : undefined,
               width: labelWidth,
               height: labelHeight,
-              zoom: 1 / canvasScale,
             }}
           >
             <span
               style={{
                 backgroundColor: 'white',
                 padding: '2px 4px',
                 borderRadius: 2,
-                fontSize: 11 / canvasScale,
+                fontSize: 11,
               }}
             >
               {printPin(props.gridTemplate, targetMarker.position, axis)}