Give every admin page consistent padding and contain page crashes

frontend/cc-ui/src/components/shell/AppShell.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import AppShell from './AppShell'
+
+describe('AppShell content area', () => {
+  beforeEach(() => {
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true, json: async () => [] }))
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  function renderShell(children: React.ReactNode) {
+    return render(
+      <AppShell active="overview" onNavigate={() => {}} user={null} onSignOut={() => {}}>
+        {children}
+      </AppShell>,
+    )
+  }
+
+  it('pads every page from the sidebar and top bar in one place', () => {
+    renderShell(<h1>Some page</h1>)
+    const main = screen.getByRole('main')
+    expect(main).toContainElement(screen.getByRole('heading', { name: 'Some page' }))
+    expect(main.style.padding).toBe('24px 32px 48px')
+    expect(main.style.maxWidth).toBe('')   // full width, not a centered box
+  })
+
+  it('keeps the shell when a page throws', () => {
+    function Broken(): never { throw new Error('boom') }
+    renderShell(<Broken />)
+    expect(screen.getByRole('main')).toHaveTextContent(/This page couldn't be displayed/)
+    expect(screen.getAllByText('Overview').length).toBeGreaterThan(0)   // sidebar still rendered
+  })
+})

frontend/cc-ui/src/components/shell/AppShell.tsx

@@ -5,6 +5,7 @@ import { findNavItem, NAVIGATION } from '../../navigation'
 import SidebarNav from './SidebarNav'
 import TopAppBar from './TopAppBar'
 import Footer from './Footer'
+import PageErrorBoundary from '../ui/PageErrorBoundary'
 
 interface Props {
   active: PageKey
@@ -54,7 +55,12 @@ export default function AppShell({ active, onNavigate, user, onSignOut, extraAct
           extraActions={extraActions}
         />
         <div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
-          <div style={{ flex: 1 }}>{children}</div>
+          {/* Every page's padding comes from here, once, so no page can
+              render flush against the sidebar or top bar. Full width and
+              left-aligned: tables and card grids use the space. */}
+          <main className="shell-content" style={{ flex: 1, width: '100%', padding: '24px 32px 48px' }}>
+            <PageErrorBoundary key={active}>{children}</PageErrorBoundary>
+          </main>
           <Footer />
         </div>
       </div>

frontend/cc-ui/src/components/ui/PageContainer.tsx

@@ -1,18 +1,12 @@
 import type { ReactNode } from 'react'
 
 /**
- * Admin Console Phase 2 design system: the max-width/centering/padding
- * wrapper every page's content sits in. Extracted from what AdminApp.tsx
- * already inlined once (`maxWidth: 1280, margin: '0 auto', padding: '24px
- * 28px 48px'`) -- new pages (Overview, ComingSoon destinations) use this;
- * existing pages are untouched and keep their own markup exactly as
- * before, since AppShell still wraps the same content area they already
- * rendered into.
+ * Admin Console Phase 2 design system: groups a page's content. Padding
+ * now comes from AppShell's <main>, which wraps every page, so this adds
+ * none of its own -- it used to center content in a 1280px box, which
+ * made the pages using it (ComingSoon) sit differently from every other
+ * page.
  */
 export default function PageContainer({ children }: { children: ReactNode }) {
-  return (
-    <div className="shell-content" style={{ maxWidth: 1280, margin: '0 auto', padding: '24px 28px 48px' }}>
-      {children}
-    </div>
-  )
+  return <div>{children}</div>
 }

frontend/cc-ui/src/components/ui/PageErrorBoundary.test.tsx

@@ -0,0 +1,30 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import PageErrorBoundary from './PageErrorBoundary'
+
+let shouldThrow = true
+function Flaky() {
+  if (shouldThrow) throw new Error('bad response shape')
+  return <div>Page content</div>
+}
+
+describe('PageErrorBoundary', () => {
+  afterEach(() => { shouldThrow = true; vi.restoreAllMocks() })
+
+  it('shows an error with Retry instead of unmounting everything', () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+    render(<div><nav>Sidebar</nav><PageErrorBoundary><Flaky /></PageErrorBoundary></div>)
+    expect(screen.getByText('Sidebar')).toBeInTheDocument()
+    expect(screen.getByText(/This page couldn't be displayed/)).toBeInTheDocument()
+
+    shouldThrow = false
+    fireEvent.click(screen.getByRole('button', { name: 'Retry' }))
+    expect(screen.getByText('Page content')).toBeInTheDocument()
+  })
+
+  it('renders children untouched when nothing fails', () => {
+    shouldThrow = false
+    render(<PageErrorBoundary><Flaky /></PageErrorBoundary>)
+    expect(screen.getByText('Page content')).toBeInTheDocument()
+  })
+})

frontend/cc-ui/src/components/ui/PageErrorBoundary.tsx

@@ -0,0 +1,33 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react'
+import ErrorState from './ErrorState'
+
+interface Props { children: ReactNode }
+interface State { failed: boolean }
+
+/** Keeps one page's render error inside that page. Without it, an
+ * unexpected API response shape blanked the whole console, sidebar and
+ * top bar included, until a full reload. AppShell keys it by the active
+ * page, so navigating elsewhere always starts from a clean state. */
+export default class PageErrorBoundary extends Component<Props, State> {
+  state: State = { failed: false }
+
+  static getDerivedStateFromError(): State {
+    return { failed: true }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('Admin page failed to render', error, info.componentStack)
+  }
+
+  render() {
+    if (this.state.failed) {
+      return (
+        <ErrorState
+          message="This page couldn't be displayed. The rest of the console still works; try again, or pick another page."
+          onRetry={() => this.setState({ failed: false })}
+        />
+      )
+    }
+    return this.props.children
+  }
+}

frontend/cc-ui/src/components/ui/index.ts

@@ -8,6 +8,7 @@ export { default as EmptyState } from './EmptyState'
 export { default as ComingSoon } from './ComingSoon'
 export { default as LoadingState } from './LoadingState'
 export { default as ErrorState } from './ErrorState'
+export { default as PageErrorBoundary } from './PageErrorBoundary'
 export { default as ActionToolbar } from './ActionToolbar'
 export { default as Pagination } from './Pagination'
 export { default as BackLink } from './BackLink'

frontend/cc-ui/src/index.css

@@ -150,6 +150,12 @@ select option { background: var(--surface); color: var(--text); }
   .shell-org-selector-label { display: none; }
   .shell-profile-label { display: none; }
 }
+/* The top-bar search is a disabled "coming soon" placeholder; below
+   this width it crowded the breadcrumb down to "Administrat… › Us…".
+   The breadcrumb tells the admin where they are, so it wins. */
+@media (max-width: 1700px) {
+  .shell-topbar-search { display: none !important; }
+}
 @media (max-width: 560px) {
   .shell-content { padding: 16px !important; }
   .shell-stat-grid { grid-template-columns: 1fr 1fr !important; }