id: 07d21d79-8fba-4c9e-a191-d7475f6336ca title: Replace scroll-tables with stacked cards on mobile state: closed labels:
- area:render assignees: [] milestone: m6-polish created: 2026-09-10T07:30:45.791389687Z updated: 2026-09-10T07:40:45.235767240Z
Context: Owner QA — horizontal scroll containers were the compromise; owner wants them GONE on mobile. Study Gitea again (issue list, PR list, file table, commit list) and replace scroll-with-better. Tasks (research first — fetch a Gitea site or work from knowledge, note which):
- Technique: priority columns + stacked cards. Desktop (>=768px): full tables as today. Narrow: rows become stacked cards (tr/td display:block; each td gets data-label attr with column name shown via ::before; low-priority columns (sha, age?) hidden or folded into the title line). NO horizontal scroll anywhere at 360px (assert: no element wider than viewport — test via max-content audit + wrapper removal on narrow? At minimum: .table-scroll overflow-x:visible under 768px + card CSS).
- Apply to: issues, pulls, commits, tasks, ci steps/runs, releases, file table. One shared pattern (classes in style.css, data-labels in templates).
- Keep zero JS, keep full data accessible (nothing deleted, only reflowed/hidden-with-legend? hiding age on mobile is fine — detail pages carry it).
- Tests: card CSS asserts (media query, data-label ::before), template asserts (data-labels present on every td), 360px-reasoning checklist in summary. Success rubric:
-
Zero .table-scroll horizontal scrolling on narrow (pattern replaced); desktop tables untouched; all data still reachable within 1 tap.
Swarm: strong Owl, taste required. Branch
m6/no-scroll.