fix(tft): responsive scorecard grid + accessible, scrollable backtest tables

[brooksRoley]

Summary

• Made the TFT backtest scorecard grid on /basketball-platform responsive (grid-cols-1 sm:grid-cols-3 instead of a bare fixed 3-col grid that cramped on mobile)
• Wrapped both backtest tables (TeamResidualsTable, CoefficientsTable) in overflow-x-auto so they no longer overflow the viewport on narrow screens
• Turned TeamResidualsTable's sortable column headers from bare clickable <th> elements into real, keyboard-operable <button>s with aria-sort — fixes a WCAG 2.1.1 (keyboard) gap
• Added the first-ever test coverage for both table components (previously zero)

Livelihood stream

• Portfolio signal (hiring)

This section of /basketball-platform is Brooks's primary case study for the LA Lakers Software Developer - Basketball Data Strategy application. These 2 UX bugs shipped to production unfixed with PR #10 (2026-07-21) and sat flagged on the cross-session recommendations ledger for 5 days — this closes them out.

Why

Two concrete, previously-flagged bugs on the site's single highest job-relevance page: a non-responsive grid that cramps on mobile, and backtest tables that were neither scrollable on narrow screens nor operable by keyboard. Small, self-contained, zero new dependencies or secrets.

Files changed

• src/pages/basketball-platform.jsx — responsive scorecard grid
• src/components/tft/TeamResidualsTable.tsx — scroll wrapper + accessible sort buttons
• src/components/tft/CoefficientsTable.tsx — scroll wrapper
• src/components/tft/__tests__/TeamResidualsTable.test.tsx (new)
• src/components/tft/__tests__/CoefficientsTable.test.tsx (new)

Test steps

1. yarn dev, visit /basketball-platform, scroll to the TFT Backtest section (requires tft_coefficients to be activated in your DB, or view the responsive grid/table markup directly in the diff)
2. Resize to a mobile viewport — scorecards stack to 1 column below sm:, and both tables scroll horizontally instead of overflowing
3. Tab to a table's sort header — it's a real <button>, focus-visible ring shows, Enter/Space triggers sort, aria-sort reflects the active column

Real command output, cold sandbox:

$ yarn lint
$ eslint src --max-warnings 0
Done in 22.41s.

$ yarn test
 Test Files  53 passed (53)
      Tests  595 passed (595)
Done in 9.72s.

$ yarn build
...
ƒ Proxy (Middleware)
○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML (uses getStaticProps)
ƒ  (Dynamic)  server-rendered on demand
Done in 17.53s.

(Test count was 589/589 before this PR — this branch adds 6 new component tests.)

Agent checklist

• yarn build passes locally
• yarn test passes (no regressions to game logic) — 595/595
• No TODO, placeholder, or stub code
• No secrets, API keys, or .env values committed
• New pages include og:title, og:description, og:image, twitter:card — N/A, no new pages
• PreText, Reveal, TiltCard used for any new UI text/cards — N/A, no new UI text/cards, only fixing existing table/grid markup
• Lighthouse scores not regressed — CI will confirm
• README updated — N/A, no new pages or components added (existing components fixed)

Learn

aria-sort on the <th> (not the button) plus a real <button type="button"> inside it is the correct accessible-sortable-table pattern — it lets assistive tech announce both "this column is sorted" and "this is an interactive control" without needing a separate live region, and gets keyboard operability for free from native button semantics instead of hand-rolled onKeyDown handlers.

---

Daily agent routine — Staff Engineer role (day-of-year 206 % 7 = 3). Picked directly off the cross-session recommendations ledger, which called this "a good next Staff-Eng/Design pickup — small, agent-doable, no secrets" after 2 prior sessions confirmed it live in production and unfixed.

---

Generated by Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
zero-next	Ready	Preview, Comment	Jul 25, 2026 3:57pm