Context
apps/ui/src/routes/endpoints.tsx:79 defaults the route's view search param to "table" (fallback(z.enum(["table","grid"]), "table").default("table")). When view !== "grid" (the default for every first-time visitor), the route renders the table branch at line 796: <div className="rounded border border-border bg-card overflow-x-clip"><table className="w-full text-sm">, with 8 columns (Netuid, Kind, URL, Provider, Region, Health, Latency, Probed — including a max-w-[36ch] URL column) and no md:hidden mobile-card fallback of its own. The mobile-friendly alternative already exists (the grid view at line 696, grid gap-3 sm:grid-cols-2 lg:grid-cols-3) — but it's opt-in via a toggle a first-time mobile visitor has no reason to know exists. Unlike ListShell-mediated tables elsewhere in the app, this one uses overflow-x-clip with no scroll alternative at all, at any viewport.
Requirement
A first-time mobile visitor to /endpoints must land on a usable view — either the table defaults to grid below a mobile breakpoint, or the table itself gets the same card-fallback/scroll treatment as other tables in the app.
Deliverable
- File to change:
apps/ui/src/routes/endpoints.tsx, the view default (line 79) and/or the table branch (line 796).
- What "done" looks like concretely — pick one: (a) default
view to "grid" below a chosen breakpoint (matching how other routes gate a mobile-card fallback), while leaving desktop's default as "table"; or (b) give the table branch its own mobile-card fallback / horizontal scroll treatment consistent with the fix landing in the sibling ListShell overflow issue. Either approach must ensure a mobile visitor who never touches the view toggle still gets a usable, non-clipped layout.
Acceptance criteria
Non-goals
- Don't remove the
table view option or change its columns — desktop users who prefer it keep it.
- Don't couple this fix to the
ListShell overflow-x-clip issue's landing — this route doesn't use ListShell, so it can ship independently.
Size
Size: S — keep this PR small (aim for ≤10 files / ≤1000 LOC).
Part of #2542.
Context
apps/ui/src/routes/endpoints.tsx:79defaults the route'sviewsearch param to"table"(fallback(z.enum(["table","grid"]), "table").default("table")). Whenview !== "grid"(the default for every first-time visitor), the route renders the table branch at line 796:<div className="rounded border border-border bg-card overflow-x-clip"><table className="w-full text-sm">, with 8 columns (Netuid, Kind, URL, Provider, Region, Health, Latency, Probed — including amax-w-[36ch]URL column) and nomd:hiddenmobile-card fallback of its own. The mobile-friendly alternative already exists (thegridview at line 696,grid gap-3 sm:grid-cols-2 lg:grid-cols-3) — but it's opt-in via a toggle a first-time mobile visitor has no reason to know exists. UnlikeListShell-mediated tables elsewhere in the app, this one usesoverflow-x-clipwith no scroll alternative at all, at any viewport.Requirement
A first-time mobile visitor to
/endpointsmust land on a usable view — either the table defaults togridbelow a mobile breakpoint, or the table itself gets the same card-fallback/scroll treatment as other tables in the app.Deliverable
apps/ui/src/routes/endpoints.tsx, theviewdefault (line 79) and/or the table branch (line 796).viewto"grid"below a chosen breakpoint (matching how other routes gate a mobile-card fallback), while leaving desktop's default as"table"; or (b) give the table branch its own mobile-card fallback / horizontal scroll treatment consistent with the fix landing in the siblingListShelloverflow issue. Either approach must ensure a mobile visitor who never touches the view toggle still gets a usable, non-clipped layout.Acceptance criteria
endpoints.tsxappears in the diff/endpointssees a fully usable, non-clipped view of the endpoint listgrid/tabletoggle continues to work and persist via the URL exactly as it does todaytableview is unchangedNon-goals
tableview option or change its columns — desktop users who prefer it keep it.ListShelloverflow-x-clip issue's landing — this route doesn't useListShell, so it can ship independently.Size
Size: S — keep this PR small (aim for ≤10 files / ≤1000 LOC).
Part of #2542.