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.
Step 1: Extend the browser geometry probe

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

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:

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)}`,
  );
}

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.

Step 3: Run RED verification

Run:

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.

Step 4: Consolidate top-level container ownership

Make the canonical rule cover both layout variants:

.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:

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

Step 5: Run GREEN verification

Run:

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.

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)).

4.9 KiB Raw Blame History

Fluid Wide Workbench Implementation Plan

Global Constraints

Task 1: Lock and implement fluid wide-screen geometry

4.9 KiB

Raw Blame History