Responsive grid layout: fixed TopBar/Sidebar with document scroll

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, hidden below 1000px
- 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>

Author: benjaminleonard

app/components/PageSkeleton.tsx

@@ -8,7 +8,6 @@
 
 import { useLocation } from 'react-router'
 
-import { PageContainer } from '~/layouts/helpers'
 import { classed } from '~/util/classed'
 
 import { MswBanner } from './MswBanner'
@@ -27,19 +26,23 @@ export function PageSkeleton({ skipPaths }: { skipPaths?: RegExp[] }) {
   return (
     <>
       {process.env.MSW_BANNER ? <MswBanner disableButton /> : null}
-      <PageContainer>
-        <div className="border-secondary flex items-center gap-2 border-r border-b p-3">
-          <Block className="h-8 w-8" />
-          <Block className="h-4 w-24" />
-        </div>
-        <div className="border-secondary flex items-center justify-between gap-2 border-b p-3">
-          <Block className="h-4 w-24" />
-          <div className="flex items-center gap-2">
-            <Block className="h-6 w-16" />
-            <Block className="h-6 w-32" />
+      <div className="min-h-full pt-(--top-bar-height)">
+        {/* TopBar skeleton */}
+        <div className="bg-default border-secondary fixed top-0 right-0 left-0 z-(--z-top-bar) grid h-(--top-bar-height) grid-cols-[var(--sidebar-width)_1fr] border-b">
+          <div className="border-secondary flex items-center gap-2 border-r p-3">
+            <Block className="h-8 w-8" />
+            <Block className="h-4 w-24" />
+          </div>
+          <div className="flex items-center justify-between gap-2 p-3">
+            <Block className="h-4 w-24" />
+            <div className="flex items-center gap-2">
+              <Block className="h-6 w-16" />
+              <Block className="h-6 w-32" />
+            </div>
           </div>
         </div>
-        <div className="border-secondary border-r p-4">
+        {/* Sidebar skeleton */}
+        <div className="border-secondary fixed top-(--top-bar-height) bottom-0 left-0 w-(--sidebar-width) border-r p-4">
           <Block className="mb-10 h-4 w-full" />
           <div className="mb-6 space-y-2">
             <Block className="h-4 w-32" />
@@ -52,8 +55,9 @@ export function PageSkeleton({ skipPaths }: { skipPaths?: RegExp[] }) {
             <Block className="h-4 w-14" />
           </div>
         </div>
-        <div className="light:bg-raise" />
-      </PageContainer>
+        {/* Content skeleton */}
+        <div className="light:bg-raise ml-(--sidebar-width)" />
+      </div>
     </>
   )
 }

app/components/Sidebar.tsx

@@ -62,7 +62,7 @@ const JumpToButton = () => {
 
 export function Sidebar({ children }: { children: React.ReactNode }) {
   return (
-    <div className="text-sans-md text-raise border-secondary flex flex-col border-r">
+    <div className="text-sans-md text-raise border-secondary fixed top-(--top-bar-height) bottom-0 left-0 flex w-(--sidebar-width) flex-col overflow-y-auto border-r">
       <div className="mx-3 mt-4">
         <JumpToButton />
       </div>

app/components/TopBar.tsx

@@ -32,16 +32,12 @@ import { pb } from '~/util/path-builder'
 
 export function TopBar({ systemOrSilo }: { systemOrSilo: 'system' | 'silo' }) {
   const { me } = useCurrentUser()
-  // The height of this component is governed by the `PageContainer`
-  // It's important that this component returns two distinct elements (wrapped in a fragment).
-  // Each element will occupy one of the top column slots provided by `PageContainer`.
   return (
-    <>
-      <div className="border-secondary flex items-center border-r border-b px-2">
+    <div className="bg-default border-secondary fixed top-0 right-0 left-0 z-(--z-top-bar) grid h-(--top-bar-height) grid-cols-[var(--sidebar-width)_1fr] border-b">
+      <div className="border-secondary flex items-center border-r px-2">
         <HomeButton level={systemOrSilo} />
       </div>
-      {/* Height is governed by PageContainer grid */}
-      <div className="bg-default border-secondary flex items-center justify-between gap-4 border-b px-3">
+      <div className="flex items-center justify-between gap-4 px-3">
         <div className="flex flex-1 gap-2.5">
           <Breadcrumbs />
         </div>
@@ -50,7 +46,7 @@ export function TopBar({ systemOrSilo }: { systemOrSilo: 'system' | 'silo' }) {
           <UserMenu />
         </div>
       </div>
-    </>
+    </div>
   )
 }
 

app/hooks/use-scroll-restoration.ts

@@ -18,20 +18,19 @@ function setScrollPosition(key: string, pos: number) {
 }
 
 /**
- * Given a ref to a scrolling container element, keep track of its scroll
- * position before navigation and restore it on return (e.g., back/forward nav).
- * Note that `location.key` is used in the cache key, not `location.pathname`,
- * so the same path navigated to at different points in the history stack will
- * not share the same scroll position.
+ * Keep track of window scroll position before navigation and restore it on
+ * return (e.g., back/forward nav). Note that `location.key` is used in the
+ * cache key, not `location.pathname`, so the same path navigated to at
+ * different points in the history stack will not share the same scroll position.
  */
-export function useScrollRestoration(container: React.RefObject<HTMLElement | null>) {
+export function useScrollRestoration() {
   const key = `scroll-position-${useLocation().key}`
   const { state } = useNavigation()
   useEffect(() => {
     if (state === 'loading') {
-      setScrollPosition(key, container.current?.scrollTop ?? 0)
+      setScrollPosition(key, window.scrollY)
     } else if (state === 'idle') {
-      container.current?.scrollTo(0, getScrollPosition(key))
+      window.scrollTo(0, getScrollPosition(key))
     }
-  }, [key, state, container])
+  }, [key, state])
 }

app/layouts/helpers.tsx

@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useRef } from 'react'
 import { Outlet } from 'react-router'
 
 import { PageActionsTarget } from '~/components/PageActions'
@@ -14,15 +13,13 @@ import { useScrollRestoration } from '~/hooks/use-scroll-restoration'
 import { SkipLinkTarget } from '~/ui/lib/SkipLink'
 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)`
 
 export function ContentPane() {
-  const ref = useRef<HTMLDivElement>(null)
-  useScrollRestoration(ref)
+  useScrollRestoration()
   return (
     <div
-      ref={ref}
-      className="light:bg-raise flex flex-col overflow-auto"
+      className="light:bg-raise ml-(--sidebar-width) flex min-h-[calc(100vh-var(--top-bar-height))] flex-col"
       id="scroll-container"
       data-testid="scroll-container"
     >
@@ -47,12 +44,10 @@ export function ContentPane() {
  * `<div>` because we don't need it.
  */
 export const SerialConsoleContentPane = () => (
-  <div className="flex flex-col overflow-auto">
-    <div className="flex grow flex-col">
-      <SkipLinkTarget />
-      <main className="*:gutter h-full">
-        <Outlet />
-      </main>
-    </div>
+  <div className="ml-(--sidebar-width) flex h-[calc(100vh-var(--top-bar-height))] flex-col overflow-hidden">
+    <SkipLinkTarget />
+    <main className="*:gutter h-full">
+      <Outlet />
+    </main>
   </div>
 )

app/table/QueryTable.tsx

@@ -46,7 +46,7 @@ function useScrollReset(triggerDep: string | undefined) {
   const resetRequested = useRef(false)
   useEffect(() => {
     if (resetRequested.current) {
-      document.querySelector('#scroll-container')?.scrollTo(0, 0)
+      window.scrollTo(0, 0)
       resetRequested.current = false
     }
   }, [triggerDep])

app/ui/styles/index.css

@@ -128,6 +128,7 @@
   :root {
     --content-gutter: 2.5rem;
     --top-bar-height: 54px;
+    --sidebar-width: 14.25rem;
 
     /* Nicer easing from: https://twitter.com/bdc */
     --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
@@ -154,8 +155,21 @@
 }
 
 @layer base {
+  html,
+  body,
+  #root {
+    height: 100%;
+  }
+
   body {
-    @apply text-default bg-default overflow-y-hidden font-sans;
+    @apply text-default bg-default font-sans;
+    overscroll-behavior-y: none;
+  }
+
+  @media (max-width: 999px) {
+    :root {
+      --content-gutter: 1.5rem;
+    }
   }
 
   /* https://github.com/tailwindlabs/tailwindcss/blob/v2.2.4/src/plugins/css/preflight.css#L57 */

index.html

@@ -12,7 +12,7 @@
     <meta charset="utf-8" />
     <title>Oxide Console</title>
 
-    <meta name="viewport" content="width=1050" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="color-scheme" content="dark light" />
 
     <link rel="icon" type="image/svg+xml" href="./app/assets/favicon.svg" />

test/e2e/scroll-restore.e2e.ts

@@ -10,11 +10,13 @@ import { expect, test } from '@playwright/test'
 import { expectScrollTop, scrollTo, sleep } from './utils'
 
 test('scroll restore', async ({ page }) => {
-  // open small window to make scrolling easier
-  await page.setViewportSize({ width: 800, height: 500 })
+  // use desktop-width viewport with short height to make scrolling easier
+  await page.setViewportSize({ width: 1280, height: 400 })
 
   // nav to disks and scroll it
   await page.goto('/projects/mock-project/disks')
+  // wait for content to render so the page is tall enough to scroll
+  await page.getByRole('heading', { name: 'Disks' }).waitFor()
   await expectScrollTop(page, 0)
   await scrollTo(page, 143)
 
@@ -32,43 +34,19 @@ test('scroll restore', async ({ page }) => {
   await scrollTo(page, 190)
   await sleep(1000)
 
-  // go forward to snapshots, now scroll it
-  await page.goForward()
+  // new nav to snapshots via click, scroll it
+  await page.getByRole('link', { name: 'Snapshots' }).click()
   await expect(page).toHaveURL('/projects/mock-project/snapshots')
   await expectScrollTop(page, 0)
-  await scrollTo(page, 30)
-
-  // Oddly, this is required here in order for the page to have time to
-  // catch the 30 scroll position. This became necessary with RR v7's use of
-  // startTransition. Extra oddly, with a value of 500 it passes rarely, but
-  // with 1000 it passes every time.
-  await sleep(1000)
-
-  // new nav to disks
-  await page.getByRole('link', { name: 'Disks' }).click()
-  await expectScrollTop(page, 0)
-
-  // this is too flaky so forget it for now
 
-  // random reload in there because we use sessionStorage. note we are
-  // deliberately on the disks page here because there's a quirk in playwright
-  // that seems to reset to the disks page on reload
-  // await page.reload()
-
-  // back to snapshots, scroll is restored
-  await page.goBack()
-  await expect(page).toHaveURL('/projects/mock-project/snapshots')
-  await expectScrollTop(page, 30)
-
-  // back again to disks, newer scroll value is restored
+  // back to disks, newer scroll value is restored
   await page.goBack()
   await expect(page).toHaveURL('/projects/mock-project/disks')
   await sleep(1000)
   await expectScrollTop(page, 190)
 
-  // forward again to newest disks history entry, scroll remains 0
+  // forward to snapshots, scroll is 0 (fresh nav)
   await page.goForward()
-  await page.goForward()
-  await expect(page).toHaveURL('/projects/mock-project/disks')
+  await expect(page).toHaveURL('/projects/mock-project/snapshots')
   await expectScrollTop(page, 0)
 })

test/e2e/utils.ts

@@ -265,14 +265,12 @@ export async function chooseFile(input: Locator, size: 'large' | 'small' = 'larg
 }
 
 export async function expectScrollTop(page: Page, expected: number) {
-  const container = page.getByTestId('scroll-container')
-  const getScrollTop = () => container.evaluate((el: HTMLElement) => el.scrollTop)
+  const getScrollTop = () => page.evaluate(() => window.scrollY)
   await expect.poll(getScrollTop).toBe(expected)
 }
 
 export async function scrollTo(page: Page, to: number) {
-  const container = page.getByTestId('scroll-container')
-  await container.evaluate((el: HTMLElement, to) => el.scrollTo(0, to), to)
+  await page.evaluate((to) => window.scrollTo(0, to), to)
 }
 
 export async function addTlsCert(page: Page) {