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
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.
Context
apps/ui/src/components/metagraphed/subnets-compare-drawer.tsx:229-230wraps the compare table in<div className="border-t border-border max-h-[55vh] overflow-auto"><table className="w-full text-[12px]">. Combiningoverflow-autoon the wrapper withw-fullon the table means the table is constrained to the wrapper's own width rather than being allowed to grow past it — withw-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
apps/ui/src/components/metagraphed/subnets-compare-drawer.tsx:229-230.w-fullso it can size to its natural content width, keep (or add)overflow-x-autoon the wrapper so the now-wider-than-container table becomes horizontally scrollable, while preserving the existingmax-h-[55vh] overflow-autovertical-scroll behavior for tall comparisons.Acceptance criteria
subnets-compare-drawer.tsxappears in the diffNon-goals
Size
Size: XS — keep this PR small (aim for ≤10 files / ≤1000 LOC).
Part of #2542.