fix: center color fan origin on top-left corner of context menu

Move fan container from inside the Background row to a child of the
menu div itself, positioned at top-0 left-0. Dots offset by -12px
(half their size) so the fan radiates exactly from the corner.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/GroupsOverlay.tsx

@@ -346,26 +346,15 @@ function GroupControls({ groupId, zoom }: GroupControlsProps) {
 
               {/* Vertical context menu - appears above the three-dot button */}
               {showMenu && (
-                <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 bg-neutral-800/90 backdrop-blur rounded-lg py-1 min-w-[130px] shadow-lg shadow-black/30">
+                <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 bg-neutral-800/90 backdrop-blur rounded-lg py-1 min-w-[130px] shadow-lg shadow-black/30" ref={colorPickerRef}>
-                  {/* Background color row */}
+                  {/* Color fan - anchored to top-left corner of menu */}
-                  <div className="relative" ref={colorPickerRef}>
-                    <button
-                      onClick={(e) => { e.stopPropagation(); setShowColorPicker(!showColorPicker); }}
-                      className="flex items-center gap-2 px-3 py-1.5 w-full hover:bg-white/10 text-xs text-white/80 transition-colors"
-                    >
-                      <div
-                        className="w-3 h-3 rounded-full border border-white/30"
-                        style={{ backgroundColor: bgColor }}
-                      />
-                      <span>Background</span>
-                    </button>
                   {showColorPicker && (
                     <>
                       <div
                         className="fixed inset-0 z-40"
                         onClick={() => setShowColorPicker(false)}
                       />
-                        <div className="absolute bottom-full left-0 mb-1 z-50 pointer-events-auto">
+                      <div className="absolute top-0 left-0 z-50 pointer-events-auto">
                         {COLOR_OPTIONS.map(({ color, label }, index) => {
                           const totalItems = COLOR_OPTIONS.length;
                           const arcSpread = 180;
@@ -377,7 +366,7 @@ function GroupControls({ groupId, zoom }: GroupControlsProps) {
                           const x = Math.cos(rad) * radius;
                           const y = Math.sin(rad) * radius;
                           const finalX = x;
-                            const finalY = y - 12;
+                          const finalY = y;
 
                           return (
                             <button
@@ -390,8 +379,8 @@ function GroupControls({ groupId, zoom }: GroupControlsProps) {
                               }`}
                               style={{
                                 backgroundColor: PICKER_PREVIEW_COLORS[color],
-                                  left: finalX,
+                                left: finalX - 12,
-                                  top: finalY,
+                                top: finalY - 12,
                                 animation: `colorFanIn-${index} 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards`,
                                 animationDelay: `${index * 0.025}s`,
                                 opacity: 0,
@@ -402,14 +391,14 @@ function GroupControls({ groupId, zoom }: GroupControlsProps) {
                                 @keyframes colorFanIn-${index} {
                                   0% {
                                     opacity: 0;
-                                      left: 0px;
+                                    left: -12px;
-                                      top: 0px;
+                                    top: -12px;
                                     transform: scale(0.3);
                                   }
                                   100% {
                                     opacity: 1;
-                                      left: ${finalX}px;
+                                    left: ${finalX - 12}px;
-                                      top: ${finalY}px;
+                                    top: ${finalY - 12}px;
                                     transform: scale(1);
                                   }
                                 }
@@ -420,7 +409,18 @@ function GroupControls({ groupId, zoom }: GroupControlsProps) {
                       </div>
                     </>
                   )}
-                  </div>
+
+                  {/* Background color row */}
+                  <button
+                    onClick={(e) => { e.stopPropagation(); setShowColorPicker(!showColorPicker); }}
+                    className="flex items-center gap-2 px-3 py-1.5 w-full hover:bg-white/10 text-xs text-white/80 transition-colors"
+                  >
+                    <div
+                      className="w-3 h-3 rounded-full border border-white/30"
+                      style={{ backgroundColor: bgColor }}
+                    />
+                    <span>Background</span>
+                  </button>
 
                   {/* Lock/Unlock row */}
                   <button