From d6e67a97c8b85a4209b6f2ed29c08d2df6122d77 Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Mon, 13 Apr 2026 09:18:03 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20Color-Picker-Cursor=20erreicht=20jetzt?=
 =?UTF-8?q?=20den=20rechten=20und=20unteren=20Rand=20updateUI=20verwendete?=
 =?UTF-8?q?=20svCanvas.width=20(HTML-Attribut,=20220px)=20statt=20der=20ta?=
 =?UTF-8?q?ts=C3=A4chlich=20gerenderten=20Breite.=20Wenn=20CSS=20den=20Can?=
 =?UTF-8?q?vas=20gr=C3=B6=C3=9Fer=20rendert,=20stoppte=20der=20Cursor=20vo?=
 =?UTF-8?q?r=20dem=20rechten=20Rand.=20Jetzt=20wird=20getBoundingClientRec?=
 =?UTF-8?q?t()=20verwendet,=20konsistent=20mit=20handleSV.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/js/color-picker.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/js/color-picker.js b/frontend/js/color-picker.js
index b41418c..e4ec37b 100644
--- a/frontend/js/color-picker.js
+++ b/frontend/js/color-picker.js
@@ -128,11 +128,14 @@ export function openColorPicker(anchorEl, currentColor = '#4285f4') {
     function updateUI() {
       const [r, g, b] = hsvToRgb(h, s, v);
       const hex = rgbToHex(r, g, b);
+      // Use rendered size so cursor matches the visible palette area
+      const svRect = svCanvas.getBoundingClientRect();
+      const hueRect = hueCanvas.getBoundingClientRect();
       // SV cursor position
-      svCursor.style.left = (s * svCanvas.width) + 'px';
-      svCursor.style.top = ((1 - v) * svCanvas.height) + 'px';
+      svCursor.style.left = (s * svRect.width) + 'px';
+      svCursor.style.top = ((1 - v) * svRect.height) + 'px';
       // Hue thumb position
-      hueThumb.style.left = (h / 360 * hueCanvas.width) + 'px';
+      hueThumb.style.left = (h / 360 * hueRect.width) + 'px';
       // Preview + hex
       preview.style.background = hex;
       hexInput.value = hex.toUpperCase();