forge/claude_artifacts/engineer-20260829-122201.md

engineer — PM Insights: full-width category items with more space

Date: 2026-08-29 · v2.3.2 · branch feature/insights-fullwidth-items

Built

Follow-up to the section accordions (v2.3.1, merged as PR #1). The categories inside Alert categories and Watch list were a narrow multi-column grid of click-to-expand cards; they are now a full-width, single-column stack with more breathing room.

CSS-only — client/src/pages/Insights/Insights.module.scss:

• .grid: display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)) → display:flex; flex-direction:column; gap:$s-4. Each .card now spans full width, one per row, with a larger inter-card gap. .grid[hidden]{display:none} kept (section-collapse still works).
• .cardHead padding 12px 14px → $s-4 $s-5 (16/20); .cardTitle 13px → 14px.
• .row padding 6px 14px → $s-2 $s-5 (8/20); .emptyRow 10px 14px → $s-3 $s-5.
• .list max-height 340 → 440px (fuller expanded list on the wider rows).
• Insights/index.tsx unchanged — each item was already an accordion.
• Version root+client 2.3.1 → 2.3.2; CHANGELOG [2.3.2].

Verified

• client tsc --noEmit clean; vite build OK. Full gate npm test = client 6/6 + root 3/3 (root deps freshly installed — that was the earlier deploy blocker, unrelated to this change).
• Compiled CSS confirms ._grid_doeho_78{display:flex;flex-direction:column;gap:16px} + [hidden]{display:none}.
• verifier: (see verifier-log entry for 2026-08-29).

Next: done.