Summary
The published Page component renders a full-width Container, but the inner vertical Block is a non-growing flex item without width=full. As a result, the page content column can collapse to intrinsic width at desktop viewports. In Destroyer Settings, this reduces a two-column settings grid to approximately 394px at a 1280px viewport and gives the Workspace heading a computed width of 0px.
Destroyer uses the documented Page, Grid, Card, and Block composition without package overrides. No compatibility workaround will be added.
Affected versions
- @askrjs/themes 0.2.4
- @askrjs/askr 0.2.3
- Chromium through Playwright 1.62.1
Source path
In src/components/page/page.tsx, Page currently composes:
- Block as main with grow
- Container with width full and page max width
- Inner Block with direction column, page padding, and gap
The inner Block does not fill the Container cross-axis. Container itself is a Block and therefore a flex container; its child remains intrinsically sized.
Steps to reproduce
- Render Page with a PageHeader and a Grid using columns base=1 and lg=14rem minmax(0, 1fr).
- Put normal Card content in the second grid column.
- Open the page at a 1280px desktop viewport.
- Inspect the Page inner Block, Grid, Card, and heading geometry.
A real-application reproduction is available in askrjs/destroyer:
- Run npm run build.
- Run npx playwright test tests/browser/operations-workspace.spec.ts --grep @finding.
- The quarantined ASKR-DESTROYER-001 test navigates through normal product routes and opens /settings/workspace.
The failure reproduced in multiple focused executions.
Observed behavior
At 1280px:
- main Page width: approximately 448.8px
- Page content Block width: approximately 394.4px
- Settings Grid columns: 224px and approximately 156.4px
- Workspace Card width: approximately 73.5px
- Workspace CardHeader columns: 0px and 18px
- Workspace h3 width: 0px, height: 16px
The URL and accessibility tree are correct, but Playwright correctly considers the heading hidden because it has zero horizontal geometry.
Expected behavior
The Page content Block fills the available Container width, subject to the Container page maximum and gutters. Responsive grids receive that available width, and normal card text and controls retain usable nonzero geometry.
Requirements
- Correct Page composition in @askrjs/themes so the inner content Block fills the Container.
- Fix the existing component path rather than requiring every Page consumer to add width props, CSS overrides, wrapper components, or test delays.
- Preserve Page maximum width, centered gutters, vertical spacing, SSR output, and responsive behavior.
- Audit sibling shell/layout primitives that place a single Block child inside a Container for the same intrinsic-width failure mode.
- Add regression coverage through the public Page component.
Acceptance criteria
- A Page regression test demonstrates that its inner content area fills the available Container width at desktop viewport sizes.
- The Destroyer ASKR-DESTROYER-001 reproduction passes unchanged.
- At 1280px, the Workspace heading and visible form controls have nonzero width and are not clipped.
- The Settings two-column grid receives the expected available page width.
- Mobile Page rendering remains single-column with no document-level horizontal overflow.
- Existing Page, Container, responsive Grid, SSR, hydration, keyboard, and focus tests remain green.
- Default-theme source and template mirrors remain consistent if any theme source changes are required.
Evidence and uncertainty
Computed geometry and source composition identify the missing fill behavior at the Page-to-Container child boundary. The exact minimal implementation belongs to the themes repository and should be established with a public-component regression test. Destroyer retains screenshots, trace, HTML report, and accessibility error context for the quarantined finding.
Summary
The published Page component renders a full-width Container, but the inner vertical Block is a non-growing flex item without width=full. As a result, the page content column can collapse to intrinsic width at desktop viewports. In Destroyer Settings, this reduces a two-column settings grid to approximately 394px at a 1280px viewport and gives the Workspace heading a computed width of 0px.
Destroyer uses the documented Page, Grid, Card, and Block composition without package overrides. No compatibility workaround will be added.
Affected versions
Source path
In src/components/page/page.tsx, Page currently composes:
The inner Block does not fill the Container cross-axis. Container itself is a Block and therefore a flex container; its child remains intrinsically sized.
Steps to reproduce
A real-application reproduction is available in askrjs/destroyer:
The failure reproduced in multiple focused executions.
Observed behavior
At 1280px:
The URL and accessibility tree are correct, but Playwright correctly considers the heading hidden because it has zero horizontal geometry.
Expected behavior
The Page content Block fills the available Container width, subject to the Container page maximum and gutters. Responsive grids receive that available width, and normal card text and controls retain usable nonzero geometry.
Requirements
Acceptance criteria
Evidence and uncertainty
Computed geometry and source composition identify the missing fill behavior at the Page-to-Container child boundary. The exact minimal implementation belongs to the themes repository and should be established with a public-component regression test. Destroyer retains screenshots, trace, HTML report, and accessibility error context for the quarantined finding.