- Use the shared Radix Select primitive for the mobile sort control
instead of a one-off native <select>, matching the design system.
- Fix the sort-direction toggle aria-label to describe the action it
performs rather than the current state.
- Drop a redundant flex wrapper around PointsValue in the desktop cell.
- Add jsdom stubs (scrollIntoView, pointer-capture) to the shared test
setup so Radix Select can be exercised in unit tests, and update the
mobile sort tests to drive the Radix dropdown.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EGQoRPjRycNSjwLrUwuKhw
The team breakdown page rendered a 5-column table that overflowed on
phones, forcing horizontal scroll. Add a responsive card layout for
mobile that shows every field (pick #, sport, participant, position,
points) with no horizontal scroll, while keeping the existing sortable
table on desktop (md+).
- Header now stacks on mobile (flex-col -> sm:flex-row).
- Mobile renders one card per pick with a compact sort control (field
select + asc/desc toggle) instead of clickable column headers.
- Extract shared PositionCell / PointsValue / pickLabel helpers so the
table and cards stay in sync.
- Update tests to scope table assertions and cover the mobile view.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EGQoRPjRycNSjwLrUwuKhw
