From e7d5f91521d77c4c630b1911ae44221b54d12265 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Mon, 23 Mar 2026 21:53:09 +1300
Subject: [PATCH] fix: use left/top for color dot positioning so hover scale
 doesn't shift

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/GroupsOverlay.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/GroupsOverlay.tsx b/src/components/GroupsOverlay.tsx
index b89e73c1..03b0ddcb 100644
--- a/src/components/GroupsOverlay.tsx
+++ b/src/components/GroupsOverlay.tsx
@@ -390,7 +390,8 @@ function GroupControls({ groupId, zoom }: GroupControlsProps) {
                                 }`}
                                 style={{
                                   backgroundColor: PICKER_PREVIEW_COLORS[color],
-                                  transform: `translate(${finalX}px, ${finalY}px)`,
+                                  left: finalX,
+                                  top: finalY,
                                   animation: `colorFanIn-${index} 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards`,
                                   animationDelay: `${index * 0.025}s`,
                                   opacity: 0,
@@ -401,11 +402,15 @@ function GroupControls({ groupId, zoom }: GroupControlsProps) {
                                   @keyframes colorFanIn-${index} {
                                     0% {
                                       opacity: 0;
-                                      transform: translate(0px, 0px) scale(0.3);
+                                      left: 0px;
+                                      top: 0px;
+                                      transform: scale(0.3);
                                     }
                                     100% {
                                       opacity: 1;
-                                      transform: translate(${finalX}px, ${finalY}px) scale(1);
+                                      left: ${finalX}px;
+                                      top: ${finalY}px;
+                                      transform: scale(1);
                                     }
                                   }
                                 `}</style>