#818
Improve mobile responsiveness of benchmark pages
Problem
The benchmark pages are difficult to use on mobile because the current tabular layout does not adapt well to narrow viewports. Users need to inspect and compare benchmark data, but the table-heavy presentation makes scanning, scrolling, and understanding the data cumbersome on phones.
Scope
Improve the responsive behavior of benchmark pages, especially mobile layouts for benchmark tables and dense comparison data.
Suggested direction
- Audit benchmark pages across common mobile widths.
- Replace or augment wide tables with a more mobile-friendly presentation, such as responsive cards, sticky key columns, horizontal scroll affordances, condensed comparison rows, or breakpoint-specific layouts.
- Preserve desktop data density while making mobile scanning and comparison practical.
- Ensure table controls, filters, headings, and empty/loading states remain usable on small screens.
Acceptance criteria
- Benchmark pages are readable and navigable on mobile without awkward horizontal-only data discovery.
- Key benchmark values can be compared on small screens without excessive zooming or layout overflow.
- Desktop table behavior remains intact or improves.
- Changes are verified on at least one mobile viewport and one desktop viewport.
Activity
2
opencode-agent[bot]4mo agoIssue understanding
This is a mobile responsiveness feature request. Two client-side table components need mobile-friendly overhauls:
apps/web/src/components/(data)/benchmark/ModelsUsingBenchmarkTable.tsx— 7-column table (Organisation, Model, Reported, Top Score, Info, Self Reported, Source) on benchmark detail pagesapps/web/src/components/(data)/model/benchmarks/ModelBenchmarksTable.tsx— 6-column table (Benchmark, Category, Top Score, Info, Self Reported, Source) on model detail pages
Both use native <table> with an overflow-x-auto wrapper — functional but poor UX on narrow viewports. The benchmark listing page (BenchmarksDisplay.tsx) already uses a responsive card grid and doesn't need changes.
AI Agent Prompt (Copy/Paste)
Improve mobile responsiveness of benchmark tables.
Files to modify:
- apps/web/src/components/(data)/benchmark/ModelsUsingBenchmarkTable.tsx
- apps/web/src/components/(data)/model/benchmarks/ModelBenchmarksTable.tsx
Both currently use a native <table> wrapped in overflow-x-auto. On narrow viewports (≤640px), replace the horizontal-scrolling table with a stacked card or collapsed-row layout that shows the same data without requiring awkward zooming/scrolling.
Requirements:
- Keep the desktop table layout identical — only change rendering at mobile breakpoints.
- Each row should become a compact card/block on mobile with labels inline (e.g. "Score: 87.3", "Source: ...").
- Preserve expandable sub-rows (chevron toggle for multiple score entries) — make them work in card mode too.
- Preserve all interactive elements: org logos, model links, source links, self-reported badges.
- Test your changes at 375px and 768px viewport widths in browser DevTools.
- Do not touch benchmark listing (BenchmarksDisplay.tsx / BenchmarkCard.tsx) — those already use a card grid.
- Run `npm run lint && npm run typecheck && npm run build` to verify no regressions.
Read the full file content of both table components first — do not rely only on this issue text. Reproduce the current mobile behavior in a browser before coding.
AI-187