#39 Replace scroll-tables with stacked cards on mobile

closedarea:renderm6-polishopened
details
updated
id
07d21d79-8fba-4c9e-a191-d7475f6336ca

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:

Comments (1)

all issues