Skip to content

Fit console tables and tabs on phones - #698

Merged
SaladDay merged 2 commits into
mainfrom
fit-console-tables-and-tabs-on-phones
Oct 14, 2026
Merged

SaladDay merged 2 commits into
mainfrom
fit-console-tables-and-tabs-on-phones

Conversation

@SaladDay

@SaladDay SaladDay commented Oct 14, 2026 •

Copy link
Copy Markdown
Collaborator

What

At 390 px the console now fits a phone without sideways page scrolling:

  • List toolbars (console.css): .list-toolbar-controls gets min-width: 0, and on phones the status filter wraps. A wide filter such as the Session log status filter no longer widens the page body, so the page no longer scrolls sideways.
  • Session log: Status moves right after Session (before Project). A phone shows each Session's status beside its name without scrolling the table.
  • Settings tabs (settings.css): on phones they wrap onto a second row instead of scrolling the last tab out of sight. zh fits on one row, en on two.
  • KPI strips: two per row below 640 px, and labels and units wrap instead of truncating ("Execution con…", "1 waiting fo…").
  • Overview tiles: subtitles wrap in a narrow column.
  • Resource facts (node page and other detail facts): a narrow card keeps two even columns, so the two-column ID fact no longer creates a 70 px implicit column that pushed "Ready for target" off the card.
  • Request log: the search form shrinks to fit. The fixed-layout table gets a 640 px minimum and scrolls in its frame instead of squeezing the request ID to one character per line.
  • Startup settings (settings.css): setting names already wrap after an underscore, so settings tables drop the shared 180 px minimum on row names. At 390 px all three columns, Restarts included, fit without scrolling; desktop is unchanged.
  • apps/web/DESIGN.md records the phone rules. Wide tables still scroll inside their frame, which is the shared table behavior.

Why

UX review finding 8 (lane C): at 390 px, tables overflowed (the Session log status column was off screen), the Settings tabs were cut off and the Startup settings table hid its Restarts column. The root cause was the toolbar's min-content width, which made the whole page body scroll sideways.

Verification

  • pnpm --filter @oac/web typecheck

  • vitest run src/features/sessions/session-log.test.ts
    Rebased onto main 2a7e88f (Give health and capacity facts one home #695); the backdrop test now comes from Give health and capacity facts one home #695 unchanged.

  • vitest run on sessions, settings and system: 84 passed.

  • One acceptance test in e2e/unified-settings.spec.ts at 390 px: the Session log Status header is on screen, the Session log table scrolls inside its .table-frame, the page never scrolls sideways (scrollWidth <= innerWidth) on the Session log or Settings, and every Settings tab and the Startup settings Restarts header are on screen. It fails without the phone CSS, and the Restarts check fails without the settings-table rule.

  • Playwright: unified-settings, request-log, diagnostics, access, resources, monitoring, system and overview-readiness: 47 passed.

  • A probe at 390 px (zh and en) over Overview, Session log, Nodes, a node page, Sandbox metrics, Core metrics, Agent metrics, Request log, Projects, Agents and every Settings tab, repeated after the rebase over 11 views. No page-level horizontal overflow remains; the only overflow left is wide tables scrolling inside their own frame.

  • Screenshots: ~/.oac/tests/ux-polish-20261014/lane-c/pr2-*, pr2r-*, and svc-* / svc2-* (Startup settings before and after).

Skipped

  • Full make check and the other Playwright specs (focused checks only).
  • No Go or docs-site change, so no Go checks and no website build.

@blacksmith-sh

This comment has been minimized.

@SaladDay
SaladDay force-pushed the fit-console-tables-and-tabs-on-phones branch from d755685 to 027de42 Compare October 14, 2026 07:41
A list toolbar no longer widens the page body, so the page never scrolls sideways at 390 px. The Session log shows Status beside each Session, Settings tabs wrap instead of scrolling out of sight, KPI strips use two columns with whole labels, narrow fact cards keep two even columns, and the Request log table scrolls in its frame.
@SaladDay
SaladDay merged commit 52aeeb8 into main Oct 14, 2026
17 checks passed
@SaladDay
SaladDay deleted the fit-console-tables-and-tabs-on-phones branch October 14, 2026 07:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant