From ce9415c478bd8b8bd29e9d1051fb5bb0ba014691 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Fri, 6 Dec 2024 11:19:22 +0100
Subject: [PATCH] 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](https://github.com/concrete-utopia/utopia/issues/6705)
---
 .../canvas/controls/grid-controls.tsx         | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 9362d108d06c..694719ff77cd 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/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,7 +2716,6 @@ const SnapLine = React.memo(
               textAlign: axis === 'row' ? 'right' : undefined,
               width: labelWidth,
               height: labelHeight,
-              zoom: 1 / canvasScale,
             }}
           >
             <span
@@ -2719,7 +2723,7 @@ const SnapLine = React.memo(
                 backgroundColor: 'white',
                 padding: '2px 4px',
                 borderRadius: 2,
-                fontSize: 11 / canvasScale,
+                fontSize: 11,
               }}
             >
               {printPin(props.gridTemplate, targetMarker.position, axis)}