Skip to content

Full width Dashboard preset remains capped at 1560px #298

Description

@BorisTyshkevich

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

  • Full width applies .dash-grid.is-wide.
  • Full width uses all available Dashboard content width inside normal page gutters on viewports wider than 1560px.
  • Leaving Full width removes .is-wide.
  • Report still uses .is-report and its existing centered width.
  • Two-column and three-column layouts retain existing behavior.
  • Mobile behavior remains unchanged.
  • Unit coverage verifies class transitions between presets.
  • Playwright coverage verifies the computed ultra-wide layout.
  • No schema, persistence, query execution, or panel-rendering behavior changes.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinggood first issueGood for newcomers

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions