Restore Fleet Sidebar 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: Restore the Fleet overview and search controls to a persistent left sidebar on desktop while preserving a compact stacked disclosure on tablet and mobile.

Architecture: Keep the existing FleetPage DOM and state because it already separates the sidebar from the results pane and provides a working disclosure control. Correct only the final CSS cascade that currently overrides the two-column layout, then extend the real-browser geometry checks so future style changes cannot silently move the sidebar back into the main flow.

Tech Stack: React 19, TypeScript, CSS Grid, Vitest, Chrome DevTools Protocol E2E.

Global Constraints

Preserve the warm cream, brown, and mint workbench palette and restrained Apple-style hierarchy.
Do not change Fleet filtering, sorting, selection, or operation behavior.
Keep desktop sidebar collapse behavior and mobile/tablet stacked disclosure behavior accessible.
Keep the existing viewport acceptance matrix: 390px, 768px, 1024px, and 1440px.
Do not add dependencies.

Task 1: Lock the responsive Fleet geometry and restore the sidebar

Files:

Modify: scripts/real-browser-e2e.mjs:384
Modify: apps/web/src/styles.css:4185
Test: scripts/real-browser-e2e.mjs

Interfaces:

Consumes: Existing .fleet-workspace, .fleet-sidebar, .fleet-sidebar-header, .fleet-sidebar-content, .fleet-results-pane, and .fleet-card-grid DOM classes.
Produces: A desktop two-column geometry above 60rem and a stacked disclosure at 60rem and below, verified through the existing fleetLayout(cdp) helper.
Step 1: Extend the browser layout snapshot

Update fleetLayout(cdp) to return the workspace display mode plus sidebar and results bounding rectangles:

const workspace = document.querySelector('.fleet-workspace');
const sidebar = document.querySelector('.fleet-sidebar');
const results = document.querySelector('.fleet-results-pane');
return {
  workspaceDisplay: workspace ? getComputedStyle(workspace).display : null,
  sidebar: sidebar ? sidebar.getBoundingClientRect().toJSON() : null,
  results: results ? results.getBoundingClientRect().toJSON() : null,
  sidebarHeaderDisplay: document.querySelector('.fleet-sidebar-header')
    ? getComputedStyle(document.querySelector('.fleet-sidebar-header')).display
    : null,
};

Step 2: Add viewport-specific assertions

For 1024px and 1440px, assert workspaceDisplay === 'grid', sidebar.right < results.left, and sidebarHeaderDisplay !== 'none'. For 390px and 768px, assert sidebar.top < results.top, the horizontal spans overlap, and the sidebar heading remains visible.

Step 3: Run the browser test and verify the regression is detected

Run: corepack pnpm --filter @multi-simadmin/web build && node scripts/real-browser-e2e.mjs --clean-dist

Expected: FAIL at the desktop geometry assertion because the final CSS currently computes .fleet-workspace as display: block.

Step 4: Restore the final CSS cascade

Replace the final single-column Fleet overrides with explicit responsive rules:

.fleet-workspace,
.fleet-workspace.is-sidebar-collapsed {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  align-items: start;
  gap: clamp(0.9rem, 1.25vw, 1.25rem);
}

.fleet-workspace.is-sidebar-collapsed {
  grid-template-columns: 4.5rem minmax(0, 1fr);
}

.fleet-sidebar {
  position: sticky;
  top: 5.3rem;
  width: auto;
  margin: 0;
  padding: 1rem;
  border: 1px solid rgba(147, 127, 95, 0.18);
  border-radius: 16px;
  background: rgba(250, 247, 232, 0.78);
  box-shadow: 0 8px 28px rgba(77, 62, 43, 0.06);
  backdrop-filter: blur(22px) saturate(130%);
}

.fleet-sidebar-header {
  display: flex;
}

@media (max-width: 60rem) {
  .fleet-workspace,
  .fleet-workspace.is-sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .fleet-sidebar,
  .fleet-sidebar.is-collapsed {
    position: static;
    width: 100%;
  }
}

Retain the existing collapsed-content rules and card-column breakpoints so behavior remains unchanged.

Step 5: Run focused verification

Run: corepack pnpm --filter @multi-simadmin/web test -- fleet/fleet-page.test.tsx

Expected: PASS.

Run: corepack pnpm --filter @multi-simadmin/web typecheck

Expected: PASS.

Run: corepack pnpm --filter @multi-simadmin/web build && node scripts/real-browser-e2e.mjs --clean-dist

Expected: PASS at all four viewport sizes, with no horizontal overflow and the intended 1/2/2/3 card columns.

Step 6: Review generated screenshots

Run the browser test with E2E_SCREENSHOT_DIR=artifacts/fleet-sidebar-review and inspect the 390px, 768px, 1024px, and 1440px Fleet screenshots. Confirm that the summary and search are left of results on desktop, stacked above results at smaller widths, and that no text or controls overlap.

5.0 KiB Raw Blame History

Restore Fleet Sidebar Implementation Plan

Global Constraints

Task 1: Lock the responsive Fleet geometry and restore the sidebar

5.0 KiB

Raw Blame History