chris/beachPartyBalloons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: zoom chrome/metallic preview dots to 220% background-size

Browse Source 
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>
This commit is contained in:
chris 2026-04-15 14:51:24 -04:00
parent c22b668bc5
commit f2fa8e3c17
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
estore/src/components/ColorPicker.tsx
View File

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