[pdevito3]

Why

The root layout and the ResponsiveDialog had layout and accessibility defects:

• A long dialog title ran under the close button. Scrolled content went under the button, and the footer scrolled out of view (ResponsiveDialog content runs under the close button, and the footer scrolls out of view #152).
• The header separator sat 6 px above the sidebar trigger (The header separator sits at the top of the row, and the router devtools add an empty contentinfo landmark #160).
• The router devtools rendered a footer, which is a contentinfo landmark (The header separator sits at the top of the row, and the router devtools add an empty contentinfo landmark #160).
• The sidebar links had no navigation landmark (The sidebar links are not in a navigation landmark #161).
• A wide child in a box that scrolls made the whole page scroll sideways (SidebarInset has no min-w-0, so a wide child makes the page scroll sideways #162).
• The breadcrumb showed "Page" for any route with params, such as /users/$id (React Aria links cannot take route params, and the breadcrumb shows "Page" for a route with params #159).

What changed

• ResponsiveDialog: the header and footer stick to the top and bottom of the content that scrolls. They cover the full width, side gutters included, so a field that scrolls under them does not show next to them. The title leaves room for the close button. The header has 0.5 rem of background below the title that takes no space, so it covers the close button and a short dialog keeps its height.
• ResponsiveDialog: the header and footer report their heights with a ResizeObserver. The scroll box has scroll padding of those heights, so Tab does not move a field under them.
• ResponsiveDialog: the bottom sheet cap uses var(--toast-reserve, 4.5rem). The override of that cap in index.css is gone, so one place owns it.
• __root.tsx: the separator centers on the trigger. The devtools render in a div. The breadcrumb looks up the page name by the path of the matched route, not by the URL. The keys are typed by the generated route paths, so a wrong key fails the build.
• app-sidebar.tsx: the sidebar links are in <nav aria-label="Main">.
• SidebarInset: adds min-w-0, so it shrinks to the room next to the sidebar.

Refs #152
Closes #160
Closes #161
Closes #162
Refs #159

Scope

• ResponsiveDialog content runs under the close button, and the footer scrolls out of view #152 is fixed for each dialog that uses ResponsiveDialogFooter, such as the text filter and the components page. It stays open for the date and multiselect filters. Their Add Filter buttons are in their own footers, so in a tall sheet they still scroll out of view. The same controls also show in the desktop submenu popover, where the sticky footer offsets do not fit. A fix needs a footer that knows its surface, and a design choice for the Select All and Add row of the multiselect on a phone.
• React Aria links cannot take route params, and the breadcrumb shows "Page" for a route with params #159 is only half fixed. The breadcrumb part is fixed. The link part needs a design choice, so I did not do it. React Aria's useHref gets only the href, so params in routerOptions cannot make a correct <a href>. Options:
  • (a) Wrap the React Aria link with TanStack's createLink(RACLink). This is what the TanStack docs show. It is a new link API with typed params.
  • (b) Type href as a plain string. Callers build the path, and route typing is lost.
  • (c) Let routerOptions take params. This type-checks, but the rendered href is wrong.
• A combobox outside a modal clears the typed text on a page scroll, and Tab picks the option under the pointer #149 is skipped. Both behaviors are React Aria defaults, so a fix is a design choice:
  • A scroll closes the list and resets the text (useCloseOnScroll closes the popover, and close commits the selection).
  • Tab commits the option under the mouse. The hovered option is also shown as focused, so this matches React Aria's model.
  • Options: (A) override React Aria internals, as Fleet did (about 40 lines, tied to internals). (B) allowsCustomValue, which keeps the text but changes what the field means. (C) a controlled inputValue at the call site. (D) report it to react-spectrum.
• The root queue items are already fixed on main: the nested main (fix(frontend): correct four small UI defects #132), min-h-screen in the route wrappers (fix(frontend): correct seven small UI defects #126), and items-center on the button size row in components.tsx.
• min-w-0 fixes a wide child inside a box that scrolls. A wide child with no box that scrolls still makes the page wider. That is normal CSS.

Tradeoffs

• I first tried a close-button row above the content. It added 12 px on a phone and pushed the date filter's Add Filter button off a short screen. The sticky header keeps the height.
• A min height on the header covered the close button, but it made a short desktop dialog 6 px taller. Plain bottom padding would make it 8 px taller and push Add Filter off a 766 px screen. Padding with a negative margin of the same size covers the button and keeps the height. The cost: the header background covers the first 0.5 rem below it, so content needs that gap. Every current dialog has it. The header JSDoc says so.
• On a phone, a sticky header with a long description uses some of the space that scrolls.
• The sticky offsets match the p-4 of the content. If that padding changes, these must change too.
• The header must be the first child and the footer the last. Their JSDoc says so.
• In the Playwright WebKit build, Tab does not scroll the dialog at all, on main too. So the focus behavior was checked in Chromium only.
• Focus on a button in the sticky footer still scrolls the content, because the browser applies the bottom scroll padding to it. Main scrolls further in the same case.

Blast Radius

• Every ResponsiveDialog with a ResponsiveDialogHeader or ResponsiveDialogFooter gets the sticky header and footer. A short dialog has the same size and title position as on main: the Edit First Name filter at 1280 px is 266 px tall with the title at the same y, and each phone sheet has the height it has on main.
• Sheet and Drawer do not change. Their screenshots are the same, pixel for pixel, before and after the last fix.
• SidebarInset is used once, in __root.tsx.

Verification

• Vitest browser tests in responsive-dialog.test.tsx at 1280 x 720 and 390 x 844: title, scroll, footer, and focus. A new test scrolls a field in focus under a short title and checks that only the header shows in the title row. It fails before the header fix (the side gutter at both sizes, and the field below the title on a phone) and passes now.
• Playwright specs in app-shell.spec.ts: separator centered, no contentinfo from the devtools, links in the Main nav, no side scroll at 1024 px. The filter-demo and toast specs from fix(frontend): fix toast and sheet defects on a phone #203 pass. The filter sheet spacing test now measures from the title, as its name says.
• pnpm lint, pnpm build, pnpm test, and pnpm test:e2e --workers=2 pass.

Screenshots

Each image shows main, then this PR before the last fix, then this PR now.

View	main / before / now
Created Date filter, 320 px, scrolled to the end, light
Created Date filter, 320 px, scrolled to the end, dark
Edit Created Date dialog, 1280 x 480, scrolled, light
Edit Created Date dialog, 1280 x 480, scrolled, dark
Edit First Name dialog, 1280 px, light
Edit First Name dialog, 1280 px, dark
Components dialog, 1280 px, light
Components dialog, 1280 px, dark
Components dialog, 320 px, light
Components dialog, 320 px, dark

Sheet and Drawer, now, light and dark (the same as before the last fix):

View	light / dark
Sheet, 320 px
Sheet, 1280 px
Drawer, 320 px
Drawer, 1280 px

The app shell header, before and after:

View	Before	After
Header, light
Header, dark

[pdevito3]

Review findings that this PR does not fix:

• Low: focus on a button in the sticky footer scrolls the content, about 300 px in a long dialog. The bottom scroll padding also applies to the footer's own buttons. Main scrolls to the end in the same case, so this is not a regression.
• Outside this diff: data-table.test.tsx "the pager button keeps the focus..." failed once in 4 full pnpm test runs and passed 5 of 5 alone. toaster.test.tsx (drawer case at line 143) failed once in 9 runs with "element is not stable ... detached". Both files belong to other work, so I did not change them.

[pdevito3]

Independent review of the fix-forward commits: no high or medium findings. One low finding stays open:

• ResponsiveDialogHeader and ResponsiveDialogFooter use pairs of negative margin and padding (-mb-2 pb-2, -mx-4 px-4). tailwind-merge keeps one class for each property, so a consumer className such as mb-4 or px-6 replaces only one half of a pair. Today no consumer passes a className to either component. Other ui/ components share the same limit. So I left it as it is.

A second low finding (the JSDoc gap below the header was too small for a focus ring) is fixed in 9659931.