Problem
The Dashboard's full-width flow preset does not activate the existing .dash-grid.is-wide styling.
reconcileGrid() currently updates only the Report modifier:
grid.classList.toggle('is-report', sview.layout.preset === 'report');
The stylesheet already defines .dash-grid.is-wide to remove the normal 1560px grid cap and fill the available Dashboard content width. Because the class is never applied, Full width remains centered and capped on viewports wider than 1560px.
This is a rendering regression from the behavior specified in #184. Full width means the complete content width inside the Dashboard page gutters; it does not mean browser fullscreen or edge-to-edge content.
Required change
In src/ui/dashboard.ts, synchronize both preset modifier classes whenever the flow layout structure is reconciled:
grid.classList.toggle('is-report', sview.layout.preset === 'report');
grid.classList.toggle('is-wide', sview.layout.preset === 'full-width');
Changing away from Full width must remove is-wide. Report, two-column, three-column, KPI-band, mobile, persistence, and execution behavior must remain unchanged.
Do not duplicate the wide-layout dimensions in TypeScript. The stylesheet remains the source of truth for grid width and page gutters.
Regression tests
Add a Dashboard unit assertion that verifies modifier-class synchronization:
full-width adds is-wide and not is-report;
report adds is-report and removes is-wide;
columns-2 or columns-3 removes both modifiers.
Also add or extend a real-browser Playwright test with a viewport wider than 1560px. For the Full width preset, verify that:
.dash-grid has class is-wide;
- computed
max-width is none;
- the grid width exceeds 1560px while remaining inside the Dashboard page gutters.
The browser test is required because happy-dom cannot validate the responsive computed-width result.
Acceptance criteria
Problem
The Dashboard's
full-widthflow preset does not activate the existing.dash-grid.is-widestyling.reconcileGrid()currently updates only the Report modifier:The stylesheet already defines
.dash-grid.is-wideto remove the normal1560pxgrid cap and fill the available Dashboard content width. Because the class is never applied, Full width remains centered and capped on viewports wider than 1560px.This is a rendering regression from the behavior specified in #184. Full width means the complete content width inside the Dashboard page gutters; it does not mean browser fullscreen or edge-to-edge content.
Required change
In
src/ui/dashboard.ts, synchronize both preset modifier classes whenever the flow layout structure is reconciled:Changing away from Full width must remove
is-wide. Report, two-column, three-column, KPI-band, mobile, persistence, and execution behavior must remain unchanged.Do not duplicate the wide-layout dimensions in TypeScript. The stylesheet remains the source of truth for grid width and page gutters.
Regression tests
Add a Dashboard unit assertion that verifies modifier-class synchronization:
full-widthaddsis-wideand notis-report;reportaddsis-reportand removesis-wide;columns-2orcolumns-3removes both modifiers.Also add or extend a real-browser Playwright test with a viewport wider than 1560px. For the Full width preset, verify that:
.dash-gridhas classis-wide;max-widthisnone;The browser test is required because happy-dom cannot validate the responsive computed-width result.
Acceptance criteria
.dash-grid.is-wide..is-wide..is-reportand its existing centered width.