Mobile layout

[david-crespo]

#3178 was meant to redo part of #2087 as a stepping stone to a proper mobile layout, but then we didn't follow up, which means the mobile layout actually got worse — it's really bad! This is an attempt at some quick fixes to make it tolerable without breaking anything for desktop users. As long as nothing on desktop sizes is affected, even if there are flaws it's hard for it to be worse than the status quo. I think it feels really good, and a thorough review by Fable 5.1 didn't turn up any regressions at desktop sizes.

🤖 Summary

Makes the console usable below 1000px, which is the existing 1000: breakpoint from the design system. Above that width the layout is unchanged apart from the items called out at the end.

Navigation

• Sidebar becomes an overlay on small screens. A hamburger toggle in the top bar opens it over the content with a scrim. It closes on scrim click and on any navigation, including navigations from breadcrumbs or quick actions. Open state lives in a small zustand store (app/stores/mobile-nav.ts) so the top bar and sidebar can share it. PageSkeleton renders the sidebar closed so there is no flash of an open drawer during load.
• Top bar collapses to a single cell. The home button cell only exists at desktop width. The shared class strings in app/layouts/helpers.tsx are used by both TopBar and PageSkeleton so the two can't drift.
• Breadcrumbs collapse instead of overflowing. When the path doesn't fit, leading crumbs are folded into a "…" menu listing the full path, keeping the silo picker and user menu in view. Widths are measured from an invisible copy of the crumbs so the longest complete suffix that fits can be chosen; the current crumb is the last to give way and truncates with an ellipsis as a final fallback. This applies at all widths, so long paths on desktop also collapse rather than pushing the right-side controls off screen.
• User menu shows the username inside the menu on small screens, where it is hidden from the trigger to save space.

Components

• Modal, SideModal, Toast, and ErrorPage are capped to the viewport width with a gutter so they no longer run edge to edge or overflow.
• Tab lists scroll horizontally below the breakpoint instead of overflowing the page.
• CardBlock.Header actions, DisksTableField buttons, Radio cards, and DateTimeRangePicker stack or stretch to full width on small screens.
• Serial console terminal uses the full width and hides the scroll buttons on small screens; the footer height becomes content-driven.
• Side modal gutter shrinks to 1.5rem below the breakpoint.

Changes that also affect desktop

• --content-gutter shrinks below 1000px rather than 768px, so windows between 768 and 999px get the narrower gutter. This aligns the gutter with the layout breakpoint used everywhere else.
• overscroll-behavior-y: none on body prevents pull-to-refresh and scroll chaining behind the sidebar overlay. On macOS this also removes the vertical rubber-band bounce.
• DropdownMenu.Content defaults collisionPadding to 12px (Base UI default is 5px) so menus keep a consistent margin from the viewport edge.

Tests

• New test/e2e/mobile-layout.e2e.ts covers the sidebar overlay open/close/navigate flow, the breakpoint transition at 999/1000px, the username in the user menu, and modal/toast bounds at 320px.
• test/e2e/breadcrumbs.e2e.ts adds cases for collapsed breadcrumbs at 404, 650, 750, and 1024px, including the full-path menu.
• The serial console visual regression test is scoped to a role locator because getByText now also matches the hidden breadcrumb measurement copy.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
console	Ready	Preview	Sep 1, 2026 10:50pm UTC

[david-crespo]

At mobile width the breadcrumbs can overflow and make the silo/system picker and user menu inaccessible.

Note however that this is not really more broken than the status quo, which lets you scroll sideways but completely borks the content.

[david-crespo]

Quick fix for that. Ugly but not broken. It's a little unfortunate that the last crumb you're left with is generic "Routes" instead of including both the name of the router and "Routes", but I don't think there's room for both.

[david-crespo]

Responsive crumbs, improve profile button collapse behavior, put username inside mobile version of user menu since it disappears from the button.

2026-09-01-responsive.crumbs.mp4

[david-crespo]

Looking really solid, only a couple of rough spots, probably mergable as-is.

2026-09-01-full-mobile-demo.mp4

Bad button

https://console-3o84wwqme-oxidecomputer.vercel.app/projects/mock-project/vpcs/default/routers/mock-system-router

Can't see disk name in mini-table

The stacking buttons are a little sad but tolerable.

https://console-3o84wwqme-oxidecomputer.vercel.app/projects/mock-project/instances-new