Responsive grid layout: fixed TopBar/Sidebar with document scroll by benjaminleonard · Pull Request #3178 · oxidecomputer/console

benjaminleonard · 2026-04-13T14:25:52Z

Refactor of #2087

Switch from a CSS grid layout (where TopBar and Sidebar occupied grid cells alongside ContentPane) to fixed-position TopBar and Sidebar with document-level scrolling. This is the foundation for mobile/tablet support and likely the place that has the potential to cause the most issues so I'm separating the two.

Viewport meta tag: proper responsive width=device-width instead of fixed width=1050
CSS: add --sidebar-width variable, responsive --content-gutter (smaller below 1000px), remove overflow-y-hidden on body, set height: 100% on html/body/#root
TopBar: single fixed element (was two Fragment children occupying grid cells)
Sidebar: fixed position with overflow scroll
ContentPane: margin-left offset for sidebar, document-level scroll via min-h-[calc(100vh-...)]
Scroll restoration: window.scrollY instead of container .scrollTop
PageSkeleton: matches new fixed layout structure
E2e: scroll-restore test updated for document scroll, expectScrollTop/scrollTo utils use window

This PR should produce a console that is visually identical to the current one.

Broader responsive changes will come in another PR, and are not a blocker for this.

Todo

Fix table dropdown overlapping header
Double check modals are not causing layout shift

vercel · 2026-04-13T14:26:03Z

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

Project	Deployment	Actions	Updated (UTC)
console	Ready	Preview	Apr 22, 2026 1:46pm

Switch from a CSS grid layout (where TopBar and Sidebar occupied grid cells alongside ContentPane) to fixed-position TopBar and Sidebar with document-level scroll. This is the foundation for mobile/tablet support. Key changes: - viewport meta tag: proper responsive instead of fixed 1050px - CSS: add --sidebar-width var, responsive --content-gutter, remove body overflow-y-hidden, set html/body/#root height: 100% - TopBar: single fixed element (was two grid cell fragments) - Sidebar: fixed position with overflow scroll - ContentPane: margin-left for sidebar on desktop, document scroll - Scroll restoration: window.scrollY instead of container scrollTop - PageSkeleton: match new fixed layout structure Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

benjaminleonard · 2026-04-15T11:00:37Z

+ * different points in the history stack will not share the same scroll position.
 */
-export function useScrollRestoration(container: React.RefObject<HTMLElement | null>) {
+export function useScrollRestoration() {


Do we even need this hook now? Since we're using a regular window scroll, perhaps we can use the built-in react-router one.

Similar to #2450 if I remove it I was unable to get react-router ScrollRestoration to work

benjaminleonard · 2026-04-15T11:03:55Z

 import { classed } from '~/util/classed'

-export const PageContainer = classed.div`grid h-screen grid-cols-[14.25rem_1fr] grid-rows-[var(--top-bar-height)_1fr]`
+export const PageContainer = classed.div`min-h-full pt-(--top-bar-height)`


Top bar is fixed, this leaves space for it. Alternatively we use sticky for the top bar but the sidebar would still be fixed and this feels marginally cleaner.

benjaminleonard · 2026-04-15T11:19:16Z

PR is visually identical to main with expanded visual regression tests. Haven't figured out an easy way to test it scrolled since the baseline would require a different scroll pattern to this new PR.

I'd suggest we err on merging sooner so it can be tested for longer.

david-crespo · 2026-04-21T15:28:27Z

No visual changes — love it. Found one issue: double scroll bar on side modal when height is small enough. Probably worth updating the regression test if it didn't catch this.

https://console-git-bl-responsiveness-grid-layout-oxidecomputer.vercel.app/projects/mock-project/disks-new

david-crespo · 2026-04-21T21:33:19Z

4d4e03f fixes the side modal scroll bar thing by turning on modal=true in the base UI dialog we use for both side model and regular middle modal. modal={false} a workaround for a Radix issue covered in #1745, where a native confirm() dialog stealing and returning focus triggered Radix's focus-outside handler and caused a dismiss loop.

In base-ui, this covers it and the modal=false bit is unnecessary.

console/app/ui/lib/Modal.tsx

Lines 54 to 61 in f25398d

    
           <BaseDialog.Root 
        
             open={isOpen} 
        
             onOpenChange={(open, { reason }) => { 
        
               // Ignore focus-out to prevent a dismiss loop when a native confirm() 
        
               // dialog steals and returns focus (same role as the old Radix 
        
               // onFocusOutside preventDefault). See oxidecomputer/console#1745. 
        
               if (!open && reason !== 'focus-out') onDismiss() 
        
             }}

modal={false} has downsides — it disables scroll lock, focus trap, backdrop registration, and outside-content inerting — so it's nice to get rid of it.

In order to make this work I also added a scrim for the modal on top of a side modal situation with a special z-index that makes sure it's between the modal and the side modal and blocks interaction with the side modal. Right now on main you can interact with the image upload side modal while the main upload modal is going.

david-crespo · 2026-04-21T22:24:45Z

I have fixes for the e2e failures but I want to merge #3192 into main and main into this first because it affects at least one of them.

Found this while working on #3178. Instance resize, attach floating IP, and attach ephemeral IP all had `onError`s that triggered toasts on server error. The first two also displayed the error in the modal. Ephemeral IP did not. This PR gets rid of the toasts and puts an error display into attach ephemeral IP. It doesn't look very good (maybe we should move the error and give it a little box or something), but it's basically the same as it already was, minus the extra toasts. (Screenshot is from playwright, hence the weird missing submit button — I think it's right in the middle of switching between the button text and the loading spinner.) <img width="930" height="528" alt="Screenshot 2026-04-21 at 5 20 23 PM" src="https://github.com/user-attachments/assets/0c6db6a6-913f-40aa-8ccc-245be9dfc1d0" />

Test failure in #3195 repros locally no problem: <img width="747" height="409" alt="image" src="https://github.com/user-attachments/assets/d1fed181-f26c-455b-a0ab-c8f8e962c1ae" /> Claude's speculation on why it suddenly became a problem after #3178 is good enough for me. This is the second or third time lately we've run into small issues because we're not awaiting `queryClient.invalidateEndpoint` in the mutation handlers. Something to keep an eye on. > The race: `NetworkingTab` gates the Delete row action on `nic.primary && multipleNics`, where `multipleNics = nics.length > 1`. When the `my-nic` delete mutation succeeds, `onSuccess` synchronously calls `queryClient.invalidateEndpoint` (not awaited) and closes the confirm modal. If the test opens nic-3's row-actions menu before the refetch lands, `nics.length` is still 2, so Delete renders disabled and wrapped in a `<Wrap with={<Tooltip/>}>`. When the refetch then lands mid-click, the `<Wrap>` unwraps, the `Menu.Item` remounts (old DOM detached), and on Safari/Firefox base-ui's Menu treats that focus/DOM churn as a close — so Playwright's retry never resolves a clickable Delete and hits the 60s timeout. > > When it was introduced: the disable rule landed April 2025 in #2806 ("Disable primary NIC delete when multiple NICs present"). The `DropdownMenu.Item` `<Wrap>`-with-Tooltip pattern has been in place since ~March 2025. So the race has been latent for about a year. > > Why it's surfacing now: first CI appearance was on the #3178 "Responsive grid layout" PR (2026-04-21), which landed on trunk 2026-04-22; every workflow run after that hits it. #3178 moved TopBar/Sidebar from CSS-grid cells to fixed-position elements, switched to document-level scroll, removed `overflow-y-hidden` on body, and set `height: 100%` on html/body/#root. None of that touches the NIC flow, but it changed paint/layout timing around modal open/close and table reflow. That shifted the window such that `expect(my-nic cell).toBeHidden()` now reliably resolves while the page is briefly inert during the modal's close transition — before the refetch has actually landed — so the test races into opening nic-3's menu in the stale state. The layout PR didn't introduce the bug; it just removed the timing cushion that had been hiding it.

vercel Bot deployed to Preview April 13, 2026 14:26 View deployment

benjaminleonard force-pushed the bl/responsiveness-grid-layout branch from 90eb34e to d22f1fe Compare April 14, 2026 12:50

vercel Bot deployed to Preview April 14, 2026 12:52 View deployment

vercel Bot had a problem deploying to Preview April 15, 2026 09:51 Failure

benjaminleonard and others added 2 commits April 15, 2026 10:54

Fix missing brace

ecf1870

benjaminleonard force-pushed the bl/responsiveness-grid-layout branch from 85918cc to ecf1870 Compare April 15, 2026 09:58

vercel Bot deployed to Preview April 15, 2026 09:58 View deployment

Expand visual regression tests

5bce8f8

vercel Bot deployed to Preview April 15, 2026 10:46 View deployment

Remove scroll-container and references

680e6c5

vercel Bot deployed to Preview April 15, 2026 10:59 View deployment

benjaminleonard commented Apr 15, 2026

View reviewed changes

Comment thread app/components/PageSkeleton.tsx Outdated

benjaminleonard commented Apr 15, 2026

View reviewed changes

benjaminleonard added 2 commits April 15, 2026 12:06

Remove unnecessary overscroll style

979e8e3

Test fix

33e9efa

vercel Bot deployed to Preview April 15, 2026 11:14 View deployment

benjaminleonard requested a review from david-crespo April 15, 2026 11:17

benjaminleonard added 2 commits April 15, 2026 12:56

zIndex prop on dropdown

e0e7e52

Prevent overscroll on modals and sidebar

e28ae94

vercel Bot deployed to Preview April 15, 2026 11:58 View deployment

Add collision padding to the action menu (avoids pagination)

5d810ff

vercel Bot deployed to Preview April 15, 2026 13:18 View deployment

Share topBar and sidebar classes with skeleton

25df9c7

vercel Bot deployed to Preview April 21, 2026 15:04 View deployment

only need one :root

b4a833a

vercel Bot deployed to Preview April 21, 2026 15:24 View deployment

modal=true on baseui dialogs, fix scrim behind nested image upload modal

4d4e03f

vercel Bot deployed to Preview April 21, 2026 21:22 View deployment

david-crespo mentioned this pull request Apr 21, 2026

Display server errors in modals, don't use toasts #3192

Merged

david-crespo added 2 commits April 22, 2026 04:38

merge main

2ef0688

fix failing e2e tests

8e89743

vercel Bot deployed to Preview April 22, 2026 11:01 View deployment

write e2e test output to .e2e-logs for agents

9881dd5

david-crespo force-pushed the bl/responsiveness-grid-layout branch from ecbc9e6 to 9881dd5 Compare April 22, 2026 11:06

vercel Bot deployed to Preview April 22, 2026 11:07 View deployment

opt out of native scroll restore

9faa577

vercel Bot deployed to Preview April 22, 2026 13:46 View deployment

david-crespo merged commit 93f206c into main Apr 22, 2026
11 of 12 checks passed

david-crespo deleted the bl/responsiveness-grid-layout branch April 22, 2026 14:50

david-crespo mentioned this pull request Apr 23, 2026

Fix NIC e2e test flake in safari #3198

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Responsive grid layout: fixed TopBar/Sidebar with document scroll#3178

Responsive grid layout: fixed TopBar/Sidebar with document scroll#3178
david-crespo merged 16 commits intomainfrom
bl/responsiveness-grid-layout

benjaminleonard commented Apr 13, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Apr 13, 2026 •

edited

Loading

Uh oh!

Uh oh!

benjaminleonard Apr 15, 2026

Uh oh!

benjaminleonard Apr 15, 2026

Uh oh!

benjaminleonard Apr 15, 2026

Uh oh!

benjaminleonard commented Apr 15, 2026

Uh oh!

david-crespo commented Apr 21, 2026 •

edited

Loading

Uh oh!

david-crespo commented Apr 21, 2026 •

edited

Loading

Uh oh!

david-crespo commented Apr 21, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

benjaminleonard commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

benjaminleonard Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

benjaminleonard Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

benjaminleonard Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

benjaminleonard commented Apr 15, 2026

Uh oh!

david-crespo commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

david-crespo commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

david-crespo commented Apr 21, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

benjaminleonard commented Apr 13, 2026 •

edited

Loading

vercel Bot commented Apr 13, 2026 •

edited

Loading

david-crespo commented Apr 21, 2026 •

edited

Loading

david-crespo commented Apr 21, 2026 •

edited

Loading