---
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):
1. 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).
2. Apply to: issues, pulls, commits, tasks, ci steps/runs, releases, file table. One shared pattern (classes in style.css, data-labels in templates).
3. Keep zero JS, keep full data accessible (nothing deleted, only reflowed/hidden-with-legend? hiding age on mobile is fine — detail pages carry it).
4. 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`.