fix(ui): let the subnet compare table scroll horizontally on narrow viewports (#3933)

[rust-toml]

Summary

Closes #3933

The subnet compare drawer's table used overflow-auto on the wrapper but w-full on the table, so it could never grow past its container — each added subnet column was squeezed and the horizontal scrollbar never appeared, hiding columns on mobile. This switches the table to min-w-full with a per-column min-w so added columns push the table past the container and the existing overflow-auto reveals them via horizontal scroll; the Metric label column is pinned sticky left-0 so row labels stay visible while values scroll.

Gates

typecheck ✓ · unit tests ✓ · prettier ✓ · build ✓ · responsive-overflow e2e ✓

Screenshots

Viewport · Theme	Before	After
Mobile · Light	columns clipped, no scroll	readable cards
Mobile · Dark	columns clipped, no scroll	readable cards
Tablet · Light	table	table, header pinned
Tablet · Dark	table	table, header pinned
Desktop · Light	table	table, header pinned
Desktop · Dark	table	table, header pinned

[superagent-security]

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.94%. Comparing base (3067106) to head (5ab7af4).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4929   +/-   ##
=======================================
  Coverage   97.94%   97.94%           
=======================================
  Files         162      162           
  Lines       19459    19459           
  Branches     7365     7365           
=======================================
  Hits        19059    19059           
  Misses         53       53           
  Partials      347      347           

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[gittensory-orb]

Warning

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

⏸️ Gittensory review result - manual review recommended

_{Review updated: 2026-07-13 00:33:42 UTC}

1 file · 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/ui/src/components/metagraphed/subnets-compare-drawer.tsx (matched apps/ui/**).

Review summary
The diff correctly fixes the horizontal-scroll bug: switching the table from `w-full` to `min-w-full` and giving each subnet column `min-w-[6rem] whitespace-nowrap` lets the table grow past its container so the existing `overflow-auto` wrapper triggers a real horizontal scrollbar as columns are added. The sticky first column (`sticky left-0` on both the `th` and `td`, with distinct `z-[2]`/`z-[1]` stacking and matching background fills) keeps the Metric label visible while values scroll, which is a sound approach and layered correctly under the sticky header's `z-[1]`. This is a scoped, low-risk CSS/class-only change with no logic touched, and CI is green across build/typecheck/tests.

Nits — 7 non-blocking

• The Metric header cell uses `bg-card/95` with `backdrop-blur` (matching the sticky header row) while the Metric body cells use plain `bg-card` with no blur — on themes where `--card` has any transparency this could produce a visible seam between the sticky column and the scrolling header at their intersection, worth a quick visual check.
• No test-path changes accompany this fix; a lightweight assertion (e.g. that the table wrapper/columns carry the new min-width classes) would guard against regression if the classes are refactored later.
• Consider extracting the repeated sticky-left-column class string into a shared constant/helper if more sticky columns are added elsewhere in the app, to keep the z-index/background pairing consistent.
• Verify at very narrow widths (e.g. 320px) that the sticky Metric column's `w-40` doesn't itself consume enough space to make the remaining scroll area cramped alongside `min-w-[6rem]` per-subnet columns.
• apps/ui/src/components/metagraphed/subnets-compare-drawer.tsx:230 uses `w-40` on the sticky metric header but not on the matching body cells, so future table-layout changes could make the pinned body labels drift from the header width.
• Code changes lack test evidence — Add focused regression tests or explain why existing coverage is sufficient.
• 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	#3933
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: 17 registered-repo PR(s), 8 merged, 5 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	rust-toml; Gittensor profile; 17 PR(s), 5 issue(s).
Gate result	⚠️ Not blocking	Advisory; not blocking this PR.

Review context

• Author: rust-toml
• Role context: outside_contributor
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: not available
• Official Gittensor activity: 17 PR(s), 5 issue(s).
• 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 Gittensory, a quiet PR intelligence layer for OSS maintainers.

• Re-run Gittensory review

[JSONbored]

Please, submit a GIF and/or recording for each before + after, not static screenshots. The AI skill in the repo should include instructions for your AI harness to accurately handle this.

Update the existing before/after screenshots with the recordings/GIFs in the same format, please (not as a comment on this PR, but in your original PR description, replacing the existing screenshot images).

[rust-toml]

PR description

The PR description has been updated.