--- id: CAP-PFM-CSH-002 title: Fit the page to the available workspace feature: FEAT-PFM-CSH-01 product_area: platform module: console-shell revision: 2 status: draft product_intent: proposed implementation_evidence: observed supersedes: [] source_sha: react-console: baf6dae382d6f41dce976c7f848667ccc37e076f services-platform: ad3f6a6582843008ed0f5a17b131878d15829af1 intent_sources: - 'react-console:docs/page-layouts.md#2026-10-12 — Final acceptance (accepted by Andrew 2026-10-12)' purpose: A shared layout gives staff predictable page alignment and appropriate working room. outcomes: - Screens choose between two common layout widths. - Space-intensive work can temporarily reduce the navigation footprint. concepts: - CON-PFM-CSH-001 actors: - ACT-PFM-001 - ACT-PFM-002 surfaces: - console preconditions: [] postconditions: [] permissions: - key: console.access where_checked: console scope: tenant rules: - id: BR-CAP-PFM-CSH-002-01 proved_by: [ATS-PFM-CSH-002-01, TST-PFM-CSH-002] statement: >- Full width is the default and fills the available content workspace; standard width centers a column capped at 1,100 pixels within that workspace. kind: invariant enforced_at: - console must_prove: true provenance: test source: >- react-console:components/console/__tests__/page-layout.test.tsx#centers a standard page in a capped inner column, with the page's classes on that column origin: >- react-console:docs/page-layouts.md#2026-10-12 — Final acceptance (accepted by Andrew 2026-10-12) - id: BR-CAP-PFM-CSH-002-02 proved_by: [] statement: >- The rendering screen selects its width rather than deriving it from an address or surrounding console area. kind: policy enforced_at: - console must_prove: false provenance: documented source: 'react-console:docs/page-layouts.md#Rules' origin: >- react-console:docs/page-layouts.md#2026-10-12 — Final acceptance (accepted by Andrew 2026-10-12) - id: BR-CAP-PFM-CSH-002-03 proved_by: [ATS-PFM-CSH-002-02, TST-PFM-CSH-001] statement: >- The inspected choosers, fields and forms lists, roles and policies select standard width, Tasks and the field editor select full width, and configuration editors may opt into standard width. kind: policy enforced_at: - console must_prove: true provenance: observed source: >- react-console:docs/page-layouts.md#Defaults; components/console/__tests__/page-layout-adoption.test.ts origin: none - id: BR-CAP-PFM-CSH-002-04 proved_by: [] statement: The layout places margins on the outer container so page content shares one left alignment. kind: invariant enforced_at: - console must_prove: false provenance: test source: >- react-console:components/console/__tests__/page-layout.test.tsx#keeps the gutters on the outer element only origin: >- react-console:docs/page-layouts.md#2026-10-12 — Final acceptance (accepted by Andrew 2026-10-12) - id: BR-CAP-PFM-CSH-002-05 proved_by: [ATS-PFM-CSH-002-03] statement: >- Record overview screens and designers are required by the layout record to collapse navigation while open and restore it on departure only when it was expanded on arrival. kind: lifecycle enforced_at: - console must_prove: true provenance: documented source: 'react-console:docs/page-layouts.md#Pages that collapse the sidebar' origin: >- react-console:docs/page-layouts.md#2026-10-12 — Final acceptance (accepted by Andrew 2026-10-12) - id: BR-CAP-PFM-CSH-002-06 proved_by: [ATS-PFM-CSH-002-04, ATS-PFM-CSH-002-06, ATS-PFM-CSH-002-07, TST-PFM-CSH-010] statement: >- Collapsing navigation enlarges full-width content while standard content remains centered, and docking the assistant reduces the workspace available to both. kind: invariant enforced_at: - console must_prove: true provenance: test source: 'react-console:e2e/layout/page-layouts.spec.ts#the keyboard shortcut collapses it too' origin: >- react-console:docs/page-layouts.md#2026-10-12 — Final acceptance (accepted by Andrew 2026-10-12) - id: BR-CAP-PFM-CSH-002-07 proved_by: [ATS-PFM-CSH-002-05] statement: >- Each console load starts with expanded navigation even though changes to that choice are written to browser storage. kind: lifecycle enforced_at: - console must_prove: true provenance: observed source: >- react-console:components/ui/sidebar.tsx:SidebarProvider; components/console/console-shell.tsx:ConsoleShell origin: none note: The linked finding records the evidence limitation or implementation gap. scenarios: - id: SC-CAP-PFM-CSH-002-01 given: Contact Types opens on a wide display. when: The page is rendered. then: Its list and header occupy the centered standard column. provenance: test source: 'react-console:e2e/layout/page-layouts.spec.ts#contact types stays standard and centred' - id: SC-CAP-PFM-CSH-002-02 given: Navigation is expanded before the contact form designer opens. when: The person enters the designer and later leaves. then: The documented expectation is collapse during design and expansion on departure. provenance: documented source: 'react-console:docs/page-layouts.md#Pages that collapse the sidebar' edge_cases: [] constraints: [] depends_on: [] related: - CAP-PFM-CSH-001 - CAP-PFM-CSH-003 journeys: [] open_questions: [] evidence: - >- react-console at baf6dae: components/console/{page-layout,collapse-sidebar,console-shell}.tsx, components/ui/sidebar.tsx, lib/layout/page-width.ts, docs/page-layouts.md, components/console/__tests__/page-layout*.ts*, e2e/layout/page-layouts.spec.ts. controls: [TC-AZ-001, TC-AZ-002, TC-AZ-003, TC-AZ-004, TC-DAT-001, TC-DAT-003, TC-PI-001, TC-PI-003, TC-PI-005, TC-PRV-001, TC-PRV-002, TC-TEN-001, TC-TEN-002, TC-TEN-003, TC-VEN-001, TC-VEN-002, TC-VEN-003] exercised_by: [FAS-PFM-CSH-01-02, FAS-PFM-CSH-01-05] suites: [TST-PFM-CSH-001, TST-PFM-CSH-002, TST-PFM-CSH-010] --- # Fit the page to the available workspace ## Purpose A shared layout gives staff predictable page alignment and appropriate working room. ## How It Works Staff encounter the layout through each screen they open. The screen’s chosen layout establishes its working column. Some screens also request temporary navigation collapse to make room for their task. Staff can use the header toggle while working on those screens. Departure restores the arrival state when the collapse helper had changed it. The recorded layout expectations remain separate from the historical browser failure that still needs verification. ## Relationships - The console frame supplies the navigation and assistant panel that share space with a page.