Files
soroban-abacus-flashcards/apps/web
Thomas Hallock b443ee9cdc feat: optimize card sorting for mobile displays
Mobile optimizations for Card Sorting game:

**Spectator Mode Bottom Sheet (iPhone):**
- Convert right sidebar to compact bottom sheet (120px tall)
- 3-column horizontal grid layout for stats (Time/Cards/Accuracy)
- Compact sizing: 8px padding, 10px labels, 16px values
- Dual-orientation toggle: ▲/▼ on mobile, ◀/▶ on desktop
- Emoji-only labels on mobile to save space
- Full viewport width on mobile (no wasted space)

**Results Screen:**
- Vertical layout on mobile (score panel above cards)
- Dynamic card sizing based on count (5→130%, 15→105%)
- Horizontal action buttons with equal widths
- 130px top padding to avoid mini app nav
- Compact score display (80px circle vs 160px desktop)

**Mini App Nav:**
- Prevent text wrapping with whiteSpace: nowrap
- Consistent height regardless of content length

**Bug Fixes:**
- Remove dead "Reveal Numbers" button code
- Fix checkSolution onClick handler type error

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-24 11:45:11 -05:00
..