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:
Thomas Hallock
2025-10-18 17:51:50 -05:00
parent e6d0bd4953
commit cf9d893f3f

View File

@@ -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%',