Remove scroll-container and references

Author: benjaminleonard

AGENTS.md

@@ -100,7 +100,7 @@
 
 # Layout & accessibility
 
-- Build pages inside the shared `PageContainer`/`ContentPane` so you inherit the skip link, sticky footer, pagination target, and scroll restoration tied to `#scroll-container` (`app/layouts/helpers.tsx`, `app/hooks/use-scroll-restoration.ts`).
+- Build pages inside the shared `PageContainer`/`ContentPane` so you inherit the skip link, sticky footer, pagination target, and scroll restoration (`app/layouts/helpers.tsx`, `app/hooks/use-scroll-restoration.ts`).
 - Surface page-level buttons and pagination via the `PageActions` and `Pagination` tunnels from `tunnel-rat`; anything rendered through `.In` lands in `.Target` automatically.
 - For global loading states, reuse `PageSkeleton`—it keeps the MSW banner and grid layout stable, and `skipPaths` lets you opt-out for routes with custom layouts (`app/components/PageSkeleton.tsx`).
 - Enforce accessibility at the type level: use `AriaLabel` type from `app/ui/util/aria.ts` which requires exactly one of `aria-label` or `aria-labelledby` on custom interactive components.

app/components/PageSkeleton.tsx

@@ -8,7 +8,7 @@
 
 import { useLocation } from 'react-router'
 
-import { PageContainer } from '~/layouts/helpers'
+import { ContentPane, PageContainer } from '~/layouts/helpers'
 import { classed } from '~/util/classed'
 
 import { MswBanner } from './MswBanner'
@@ -28,8 +28,8 @@ export function PageSkeleton({ skipPaths }: { skipPaths?: RegExp[] }) {
     <>
       {process.env.MSW_BANNER ? <MswBanner disableButton /> : null}
       <PageContainer>
-        {/* 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">
+        {/* TopBar */}
+        <div className="bg-default border-secondary fixed inset-x-0 top-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" />
@@ -42,7 +42,7 @@ export function PageSkeleton({ skipPaths }: { skipPaths?: RegExp[] }) {
             </div>
           </div>
         </div>
-        {/* Sidebar skeleton */}
+        {/* Sidebar */}
         <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">
@@ -56,8 +56,8 @@ export function PageSkeleton({ skipPaths }: { skipPaths?: RegExp[] }) {
             <Block className="h-4 w-14" />
           </div>
         </div>
-        {/* Content skeleton */}
-        <div className="light:bg-raise ml-(--sidebar-width)" />
+        {/* Content */}
+        <ContentPane />
       </PageContainer>
     </>
   )

app/layouts/helpers.tsx

@@ -18,11 +18,7 @@ export const PageContainer = classed.div`min-h-full pt-(--top-bar-height)`
 export function ContentPane() {
   useScrollRestoration()
   return (
-    <div
-      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"
-    >
+    <div className="light:bg-raise ml-(--sidebar-width) flex min-h-[calc(100vh-var(--top-bar-height))] flex-col">
       <div className="flex grow flex-col pb-8">
         <SkipLinkTarget />
         <main className="*:gutter">

test/e2e/ip-pool-silo-config.e2e.ts

@@ -330,9 +330,7 @@ test.describe('IP pool configuration: pelerines silo (no defaults)', () => {
     await page.getByRole('button', { name: 'Create instance' }).click()
 
     // RHF required validation should show an error on the pool field
-    await expect(
-      page.getByTestId('scroll-container').getByText('IPv4 pool is required')
-    ).toBeVisible()
+    await expect(page.getByText('IPv4 pool is required')).toBeVisible()
 
     // Should still be on the create page
     await expect(page).toHaveURL('/projects/adorno-project/instances-new')
@@ -375,9 +373,7 @@ test.describe('IP pool configuration: pelerines silo (no defaults)', () => {
     await page.getByRole('button', { name: 'Create instance' }).click()
 
     // RHF required validation should show an error on the pool field
-    await expect(
-      page.getByTestId('scroll-container').getByText('IPv6 pool is required')
-    ).toBeVisible()
+    await expect(page.getByText('IPv6 pool is required')).toBeVisible()
 
     // Should still be on the create page
     await expect(page).toHaveURL('/projects/adorno-project/instances-new')