Fix eyedropper loupe region when UI zoom is not 1

bjarneo · bjarneo · commit 3a7269d08347 · 2026-04-19T13:14:57.000+02:00
On webkit2gtk, CSS zoom on &lt;html&gt; scales getBoundingClientRect() but
leaves event.clientX/Y in logical coords, so the loupe sampled a patch
offset from the cursor whenever Ctrl+=/Ctrl+- had been used. Normalize
the rect into the same space as the mouse coords before computing the
object-fit letterbox mapping.
diff --git a/frontend/src/lib/components/editor/WallpaperHero.svelte b/frontend/src/lib/components/editor/WallpaperHero.svelte
@@ -103,14 +103,23 @@
                 : source.naturalHeight;
         if (!naturalW || !naturalH) return null;
 
+        // CSS `zoom` on <html> scales getBoundingClientRect() but not e.clientX/Y
+        // on webkit2gtk — normalize rect into the same space as the mouse coords.
+        const zoom =
+            parseFloat(document.documentElement.style.zoom as string) || 1;
+        const rectLeft = rect.left / zoom;
+        const rectTop = rect.top / zoom;
+        const rectWidth = rect.width / zoom;
+        const rectHeight = rect.height / zoom;
+
         // object-cover uses max (crop-fill), object-contain uses min (letterbox).
         const scale = expanded
-            ? Math.min(rect.width / naturalW, rect.height / naturalH)
-            : Math.max(rect.width / naturalW, rect.height / naturalH);
-        const offsetX = (rect.width - naturalW * scale) / 2;
-        const offsetY = (rect.height - naturalH * scale) / 2;
-        const localX = e.clientX - rect.left - offsetX;
-        const localY = e.clientY - rect.top - offsetY;
+            ? Math.min(rectWidth / naturalW, rectHeight / naturalH)
+            : Math.max(rectWidth / naturalW, rectHeight / naturalH);
+        const offsetX = (rectWidth - naturalW * scale) / 2;
+        const offsetY = (rectHeight - naturalH * scale) / 2;
+        const localX = e.clientX - rectLeft - offsetX;
+        const localY = e.clientY - rectTop - offsetY;
 
         // In contain mode, clicks on the letterbox lie outside the image — bail.
         if (
