fix(card-sorting): increase card tile sizes to contain abacuses
Make card tiles larger to properly contain AbacusReact SVGs without overflow. **Issue:** Card tiles were too small (90px × 90px and 90px × 110px) to contain the AbacusReact SVGs, causing abacuses to overflow their containers. **Fix:** - **Available cards**: Increased from 90px × 90px to 140px × 140px - **Position slots**: Increased from 90px × 110px to 140px × 160px **Result:** Abacus SVGs now fit comfortably within their card containers without overflowing, while maintaining the overflow: hidden constraint as a safety measure. src/arcade-games/card-sorting/components/PlayingPhase.tsx:283-284,419-420 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -280,8 +280,8 @@ export function PlayingPhase() {
|
||||
key={card.id}
|
||||
onClick={() => handleCardClick(card.id)}
|
||||
className={css({
|
||||
width: '90px',
|
||||
height: '90px',
|
||||
width: '140px',
|
||||
height: '140px',
|
||||
padding: '8px',
|
||||
border: '2px solid',
|
||||
borderColor: selectedCardId === card.id ? '#1976d2' : 'transparent',
|
||||
@@ -416,8 +416,8 @@ export function PlayingPhase() {
|
||||
key={`slot-${index}`}
|
||||
onClick={() => handleSlotClick(index)}
|
||||
className={css({
|
||||
width: '90px',
|
||||
height: '110px',
|
||||
width: '140px',
|
||||
height: '160px',
|
||||
padding: '0.5rem',
|
||||
borderRadius: '8px',
|
||||
border: '2px solid',
|
||||
|
||||
Reference in New Issue
Block a user