# Fluid Wide Workbench Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Remove fixed-width outer whitespace from all top-level workspaces and render four Fleet columns at 1920px without changing existing narrower layouts.

**Architecture:** Consolidate top-level width ownership in the canonical `.app-layout` rule and delete obsolete width constraints from later visual experiments. Extend the existing real-Chrome acceptance test to measure the application container on Nodes, Automation, and Settings at 1920px, while leaving focused-content limits untouched.

**Tech Stack:** CSS Grid, React 19, Vite, Chrome DevTools Protocol E2E.

## Global Constraints

- Nodes, Automation, and Settings use a fluid top-level container with 16px to 24px desktop gutters.
- Fleet remains one column at 390px, two at 768px and 1024px, three at 1440px, and four at 1920px.
- The 17rem Fleet sidebar and its responsive stacking behavior remain unchanged.
- Forms, dialogs, drawers, message bubbles, and empty states retain their existing content-specific width limits.
- Do not add dependencies or change application behavior.

---

### Task 1: Lock and implement fluid wide-screen geometry

**Files:**

- Modify: `scripts/real-browser-e2e.mjs:384`
- Modify: `apps/web/src/styles.css:1946`
- Modify: `apps/web/src/styles.css:2917`
- Modify: `apps/web/src/styles.css:3238`
- Modify: `apps/web/src/styles.css:4178`
- Test: `scripts/real-browser-e2e.mjs`

**Interfaces:**

- Consumes: `.app-layout`, `.app-layout-single`, `.fleet-card-grid`, and the existing Chrome viewport matrix.
- Produces: `pageLayout(cdp)` geometry for reusable outer-gutter assertions and a 1920px four-column Fleet layout.

- [x] **Step 1: Extend the browser geometry probe**

Add a helper that returns the viewport width and `.app-layout` bounds:

```js
async function pageLayout(cdp) {
  return evaluate(
    cdp,
    `(() => { const layout = document.querySelector('.app-layout'); if (!layout) return null; const rect = layout.getBoundingClientRect(); return { viewport: innerWidth, left: rect.left, right: rect.right, width: rect.width }; })()`,
  );
}
```

Add an assertion helper that requires both outer gaps to be at least 16px and no more than 24px:

```js
async function assertWidePageGutters(cdp, label) {
  const layout = await pageLayout(cdp);
  assert.ok(layout, `${label} application layout must render`);
  const rightGap = layout.viewport - layout.right;
  assert.equal(
    layout.left >= 16 && layout.left <= 24 && rightGap >= 16 && rightGap <= 24,
    true,
    `${label} must keep 16px to 24px outer gutters: ${JSON.stringify(layout)}`,
  );
}
```

- [x] **Step 2: Add 1920px acceptance coverage**

Add `{ width: 1920, height: 1080, columns: 4, sidebarMode: 'left', mobile: false }` to `viewportCases`. After the Fleet interaction checks, assert wide gutters for Nodes, navigate to Settings and assert them there, then navigate to Automation and assert them there before the existing drawer flow changes the viewport to 390px.

- [x] **Step 3: Run RED verification**

Run:

```powershell
corepack pnpm --filter @multi-simadmin/web build
node scripts/real-browser-e2e.mjs --clean-dist
```

Expected: FAIL at 1920px because Fleet still computes three columns or because `.app-layout` leaves approximately 224px on each side.

- [x] **Step 4: Consolidate top-level container ownership**

Make the canonical rule cover both layout variants:

```css
.app-layout,
.app-layout.app-layout-single {
  width: 100%;
  max-width: none;
  padding: clamp(0.85rem, 1.35vw, 1.45rem) clamp(0.8rem, 1.6vw, 1.75rem);
}
```

Remove top-level `width: min(100%, 92rem)`, `max-width: 92rem`, `width: min(100%, 106rem)`, and centering declarations from the obsolete `.app-layout` experiment blocks. Keep their unrelated padding and minimum-height declarations intact.

Add the wide Fleet breakpoint after the base grid rule:

```css
@media (min-width: 112rem) {
  .fleet-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
```

- [x] **Step 5: Run GREEN verification**

Run:

```powershell
corepack pnpm --filter @multi-simadmin/web test
corepack pnpm --filter @multi-simadmin/web typecheck
corepack pnpm --filter @multi-simadmin/web build
node scripts/real-browser-e2e.mjs --clean-dist
corepack pnpm lint
```

Expected: Web tests, typecheck, build, lint, and real Chrome E2E pass. The browser test reports correct 390/768/1024/1440/1920 layouts without horizontal overflow.

- [x] **Step 6: Inspect wide-screen screenshots and restore the local build**

Run E2E with `E2E_SCREENSHOT_DIR=artifacts/fluid-wide-review`, inspect the 1440px and 1920px Fleet screenshots, then rebuild without `--clean-dist`. Verify `http://127.0.0.1:8789/` and `/api/v1/automation/schedules` return 200 and that the served CSS contains `repeat(4,minmax(0,1fr))`.