From f2fa8e3c17c8e61c3f3458a88f21c2a773c6a048 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Wed, 15 Apr 2026 14:51:24 -0400
Subject: [PATCH] fix: zoom chrome/metallic preview dots to 220%
 background-size

Image-based colors (chrome/metallic) have a balloon silhouette against
a transparent bg, so cover was fitting the whole image including
whitespace. 220% zooms into the center where the finish actually is.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 estore/src/components/ColorPicker.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/estore/src/components/ColorPicker.tsx b/estore/src/components/ColorPicker.tsx
index 522edbb..6d6fdba 100644
--- a/estore/src/components/ColorPicker.tsx
+++ b/estore/src/components/ColorPicker.tsx
@@ -353,13 +353,14 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
                         <span style={{ display: 'flex', gap: '3px', flexShrink: 0 }}>
                           {family.colors.slice(0, 7).map((c) => (
                             <span key={c.name} style={{
-                              width:        '13px',
-                              height:       '13px',
-                              borderRadius: '50%',
-                              background:   c.image ? `url('/color/${c.image}') center/cover` : c.hex,
-                              border:       '1px solid rgba(0,0,0,0.12)',
-                              flexShrink:   0,
-                              display:      'inline-block',
+                              width:           '13px',
+                              height:          '13px',
+                              borderRadius:    '50%',
+                              background:      c.image ? `url('/color/${c.image}') center/cover` : c.hex,
+                              backgroundSize:  c.image ? '220%' : undefined,
+                              border:          '1px solid rgba(0,0,0,0.12)',
+                              flexShrink:      0,
+                              display:         'inline-block',
                             }} />
                           ))}
                         </span>