Skip to content

SubnetsCompareDrawer's comparison table has no horizontal-scroll wrapper — only vertical overflow #3933

Description

@JSONbored

Context

apps/ui/src/components/metagraphed/subnets-compare-drawer.tsx:229-230 wraps the compare table in <div className="border-t border-border max-h-[55vh] overflow-auto"><table className="w-full text-[12px]">. Combining overflow-auto on the wrapper with w-full on the table means the table is constrained to the wrapper's own width rather than being allowed to grow past it — with w-full, there is no intrinsic table width larger than the container to ever trigger a horizontal scrollbar. CompareGrid (lines 236-243) adds one <th>/<td> column per subnet added to the compare dock, so as more subnets are compared, the table has no way to actually reveal the added columns on a narrow viewport; they're simply squeezed into the same fixed width.

Requirement

The comparison table must be able to grow wider than its container as more subnets are added, and the container must let a user scroll horizontally to reach every compared subnet's column.

Deliverable

  • File to change: apps/ui/src/components/metagraphed/subnets-compare-drawer.tsx:229-230.
  • What "done" looks like concretely: remove (or override) the table's w-full so it can size to its natural content width, keep (or add) overflow-x-auto on the wrapper so the now-wider-than-container table becomes horizontally scrollable, while preserving the existing max-h-[55vh] overflow-auto vertical-scroll behavior for tall comparisons.

Acceptance criteria

  • subnets-compare-drawer.tsx appears in the diff
  • With 4+ subnets added to the compare dock at a narrow viewport, every subnet's column is reachable by scrolling the table horizontally
  • Vertical scrolling for a tall comparison (many metric rows) still works as before
  • Includes a before/after screenshot table at mobile (375px) and tablet (768px) with 4+ subnets compared, both themes, per the repo's UI-PR requirement
  • Since this is a scroll-behavior fix, include a short screen recording (GIF/MP4) showing the table actually scrolling horizontally to reveal an added column — a static screenshot can't demonstrate this

Non-goals

  • Don't change how subnets are added to or removed from the compare dock.
  • Don't change the metrics/rows shown in the comparison.

Size

Size: XS — keep this PR small (aim for ≤10 files / ≤1000 LOC).

Part of #2542.

Metadata

Metadata

Assignees

No one assigned

    Labels

    gittensor:bugGittensor-scored bug fix or unsolicited PR — scores a 0.05x multiplier.

    Projects

    Status
    In progress

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions