multi-simadmin/docs/superpowers/specs/2026-07-30-fluid-wide-workbench-design.md

Fluid Wide Workbench Design

Date: 2026-07-30

Status: Approved

Problem

The final workbench cascade reintroduced width: min(100%, 92rem) and max-width: 92rem on .app-layout. A 1920px viewport therefore leaves approximately 224px of unused space on each side. The existing browser acceptance matrix stopped at 1440px, so it could not detect this regression.

Selected Design

• Nodes, Automation, and Settings use one fluid top-level application container with no global maximum width.
• Desktop outer gutters stay between 16px and 24px, including at 1920px and above.
• The Fleet sidebar remains 17rem and sticky above 60rem; this correction does not move or restyle it.
• Fleet retains one column at 390px, two at 768px and 1024px, three at 1440px, and uses four columns at 1920px.
• Width limits on focused content such as forms, drawers, dialogs, message bubbles, and empty states remain unchanged.

Cascade Ownership

The canonical .app-layout rule owns width: 100% and max-width: none for both normal and single-layout variants. Later workbench guards may adjust padding but must not redefine container width. Obsolete 92rem and 106rem top-level width declarations are removed so future visual changes cannot reactivate them through specificity or source order.

Acceptance

• Real Chrome checks at 390px, 768px, 1024px, 1440px, and 1920px.
• At 1920px, .app-layout has no more than 24px of empty space on either side for Nodes, Automation, and Settings.
• Fleet has four columns at 1920px and no horizontal overflow.
• Existing sidebar geometry and the 390/768/1024/1440 card-column expectations remain unchanged.
• Focused content width limits remain intact.