Repository navigation
Fit console tables and tabs on phones - #698
Merged
Merged
Conversation
This comment has been minimized.
This comment has been minimized.
SaladDay
force-pushed
the
fit-console-tables-and-tabs-on-phones
branch
from
October 14, 2026 07:41
d755685 to
027de42
Compare
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
At 390 px the console now fits a phone without sideways page scrolling:
console.css):.list-toolbar-controlsgetsmin-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.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.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.mdrecords 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 typecheckvitest run src/features/sessions/session-log.test.tsRebased 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 runon sessions, settings and system: 84 passed.One acceptance test in
e2e/unified-settings.spec.tsat 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-*, andsvc-*/svc2-*(Startup settings before and after).Skipped
make checkand the other Playwright specs (focused checks only).