feat(ui): make maintainer data tables responsive and keyboard-accessible (#794)

[shinkaito-ai]

Summary

Makes the maintainer console's data tables responsive and accessible, and applies the badge/table polish from the owner review.

• TableScroll primitive (data-table.tsx): a focusable (tabIndex={0}), role="region" + aria-label'd horizontal-scroll container, so wide tables are scrollable by keyboard alone (WCAG 2.1.1), not just by pointer. Adopted on the maintainer quality table and the two maintainer-panel tables (reviewability queue + permission remediation), which previously had no scroll region at all. Added scope="col" headers and an sr-only <caption> to each.
• No-wrap + compact badges (owner review follow-ups): long status badges (NEEDS-AUTHOR, REVIEW-NOW, …) wrapped onto two lines and mobile table cells wrapped onto many lines. Added whitespace-nowrap (+ shrink-0 dots) to StatusPill/BoundaryBadge and the tables so labels/cells stay single-line and scroll inside the region. Then shrank the pills to a 10px font with tighter padding/gap and a smaller dot so they fit the dense tables — colors (per-status tones) unchanged.

No behavior/logic change; apps/gittensory-ui only. Closes #794.

Scope

• Conventional Commit title; focused, UI-only.
• Follows CONTRIBUTING.md; no GitHub Pages/VitePress/site//CNAME.
• Linked open issue: Closes feat(ui): responsive/mobile + accessibility pass #794.

Validation

• npm run ui:lint — changed files clean.
• npm run ui:typecheck — 0 errors.
• npm run ui:test — 18 passing (new TableScroll test + the existing contributor-quality-table, maintainer-panel, and gate-precision-card badge-consumer suites, unchanged and green).
• git diff --check.
• Backend gates / Codecov — N/A: apps/** only, no coverage obligation.

Safety

• No secrets/wallets/hotkeys/trust-scores/private data. Contributor table still redacts to band + open-PR count.
• UI uses real empty/loading/error states, not production mock/demo fallbacks. (Sample rows below were injected into the running app only for capture — not in the diff.)
• UI Evidence below (GitHub-hosted JPG thumbnails; not committed to the repo).
• No changelog edit.

UI Evidence

gittensory-ui is dark-mode-only, so there's no theme dimension — each viewport, before → after. Before: badges wrap onto two lines, cells wrap onto many lines. After: compact single-line badges (same per-status colors), rows scroll in the focusable region.

Viewport (dark)	Before	After
Desktop (1280)
Tablet (768)
Phone (375)

Notes

• TableScroll and the compact-badge tweak are shared/reusable; the remaining app tables can adopt them in follow-ups.

[superagent-security]

Superagent didn't find any vulnerabilities or security issues in this PR.

[JSONbored]

Can you please fix the mobile + desktop badges, to make them fit much nicer/not wrap onto multiple lines? RIght now they look really rough.

Also, if you could fix the mobile table views - they wrap onto multiple lines as well and it makes for a poor UX (i know this is out of scope, but you earn more points for it so win/win :) ) - update screenshots when you're done, and voila, i'll merge/approve.

Thanks a bunch!

[loopover-orb]

Warning

🟨🟨🟨🟨🟨🟨🟨🟨🟨🟨🟨🟨

⏸️ LoopOver review result - manual review recommended

_{Review updated: 2026-07-14 05:26:51 UTC}

5 files · 1 AI reviewer · no blockers · readiness 100/100 · CI green · blocked

⏸️ Suggested Action - Manual Review

• Touches a guarded path — held for manual review: This PR changes guardrail-protected path(s): apps/gittensory-ui/src/components/site/app-panels/contributor-quality-table.tsx (matched apps/gittensory-ui/**), apps/gittensory-ui/src/components/site/app-panels/maintainer-panel.tsx (matched apps/gittensory-ui/**), apps/gittensory-ui/src/components/site/control-primitives.tsx (matched apps/gittensory-ui/**), apps/gittensory-ui/src/components/site/data-table.test.tsx (matched apps/gittensory-ui/**), apps/gittensory-ui/src/components/site/data-table.tsx (matched apps/gittensory-ui/**).

Review summary
This adds a shared `TableScroll` primitive (focusable, `role="region"` scroll container) and adopts it across three maintainer tables, adding `scope="col"` headers and `sr-only` captions — a straightforward, well-scoped a11y/responsive fix with no behavior/logic change. The diff is clean: the new component is small, unit-tested for both the tabIndex/role/className behavior and className merging, and the table markup changes are mechanical (wrapping existing tables, adding attributes). CI is fully green and the changes map directly to the stated intent (closing #794).

Nits — 5 non-blocking

• The external brief flags `data-table.tsx:6` and `:9` for 'magic numbers' 794/2.1, but these are just issue/WCAG references inside a comment, not real numeric literals in code — false positive to ignore.
• apps/gittensory-ui/src/components/site/app-panels/maintainer-panel.tsx is large (~771 lines per the brief); consider splitting table sections into their own files as a follow-up, though this PR isn't the place to do that.
• Consider extracting the repeated `<th scope="col">` + caption pattern into a small helper if more tables adopt `TableScroll` in the future, to avoid boilerplate duplication (contributor-quality-table.tsx, maintainer-panel.tsx).
• If future tables need sortable or interactive headers, the current `role="region"`+tabIndex approach on the wrapper should still compose cleanly — worth a quick manual keyboard-tab check in a browser to confirm focus order isn't disrupted by the two new tab stops in maintainer-panel.tsx.
• Touches a guarded path — held for manual review — A maintainer must review and merge this change.

Signal	Result	Evidence
Code review	✅ No blockers	1 reviewer
Linked issue	✅ Linked	#794
Related work	✅ No active overlap found	No same-issue or scoped active PR overlap found.
Change scope	✅ 20/20	Low review scope from cached public metadata (1 linked issue).
Validation posture	✅ 25/25	PR body includes validation/test evidence.
Contributor workload	✅ 10/10	Author activity: 0 registered-repo PR(s), 0 merged, 0 issue(s).
Contributor context	❌ No public Gittensor match	shinkaito-ai; not a blocker.
Gate result	⚠️ Not blocking	Advisory; not blocking this PR.
Improvement	✅ Minor	risk: clean · value: minor — Code changes are accompanied by test evidence.

Review context

• Author: shinkaito-ai
• Role context: outside_contributor
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: not available
• Contributor context: Public profile only; not a blocker.
• PR-specific overlap: none found.

Contributor next steps

• Keep the PR focused and include validation evidence before maintainer review.

Signal definitions

• Related work = same linked issue, overlapping active PRs, or title/path similarity.
• Change scope = cached public metadata such as size labels, draft state, and review-burden hints.
• Validation posture = whether the PR provides enough public validation/test evidence for maintainer review.
• Contributor workload = public contributor activity and cleanup pressure, not a repo-wide quality failure.
• Contributor context = public GitHub/Gittensor identity context; non-Gittensor status is not a blocker.

[BETA] Chat with Gittensory

Ask Gittensory a question about this PR directly in a comment — grounded only in the same cached, public-safe facts shown above, never a new claim.

• @gittensory ask <question> answers contribution-quality Q&A with source citations and freshness.
• @gittensory chat <question> answers in natural prose from cached decision-pack facts via local inference (maintainer/collaborator; read-only).
• A plain-language @gittensory mention with a real question is routed to the closest matching read-only command automatically -- no exact syntax required.

Full command reference: https://gittensory.aethereal.dev/docs/gittensory-commands

Visual preview

Route	Viewport	Before (production)	After (this PR's preview)	Diff
/	desktop			—
/	mobile			—

Click any thumbnail to open the full-size screenshot. Before = production · After = this PR's preview deploy.

_{🟩 Safe / merged · 🟦 Advisory · 🟨 Held for review · 🟥 Blocked / closed}

---

💰 Earn for open-source contributions like this. Gittensor lets GitHub contributors earn for the work they already do — register to start earning →.

Checked by LoopOver, a quiet PR intelligence layer for OSS maintainers.

• Re-run LoopOver review

[shinkaito-ai]

Thanks for the review! Fixed both: added whitespace-nowrap (+ shrink-0 dots) to StatusPill/BoundaryBadge so badges never wrap, and whitespace-nowrap to the tables so mobile cells stay single-line and scroll in the focusable region instead of wrapping. Updated the UI Evidence with before/after across desktop/tablet/phone. ??

[shinkaito-ai]

Both addressed: badges are now compact (10px font, tighter padding + smaller dot) and keep their per-status colors (green REVIEW-NOW/CLEAN, amber NEEDS-AUTHOR/ELEVATED, mint WATCH/LOW), and cells stay single-line and scroll instead of wrapping. Updated the before/after evidence across desktop/tablet/phone. ??