30 lines
1.7 KiB
Markdown
30 lines
1.7 KiB
Markdown
# 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.
|