fix(card-sorting): increase SVG size to fill card containers
Make AbacusReact SVGs larger by allowing them to fill their containers. **Issue:** SVG containers were set to fixed small sizes (74px × 74px and 70px × 70px), making the abacuses appear too small within their cards. **Fix:** - **Available cards**: Changed SVG container from 74px × 74px to 100% × 100% to fill the entire 90px card (accounting for 8px padding) - **Position slots**: Changed SVG container from 70px × 70px to flex: 1, width: 100% to fill available space while leaving room for label **Result:** Abacuses now appear larger and fill their card containers better while still being constrained by overflow: hidden to prevent breaking out. src/arcade-games/card-sorting/components/PlayingPhase.tsx:314-329,456-473 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -314,8 +314,8 @@ export function PlayingPhase() {
|
||||
<div
|
||||
dangerouslySetInnerHTML={{ __html: card.svgContent }}
|
||||
className={css({
|
||||
width: '74px',
|
||||
height: '74px',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
@@ -458,13 +458,12 @@ export function PlayingPhase() {
|
||||
__html: card.svgContent,
|
||||
}}
|
||||
className={css({
|
||||
width: '70px',
|
||||
height: '70px',
|
||||
flex: 1,
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
margin: '0 auto',
|
||||
'& svg': {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
|
||||
Reference in New Issue
Block a user