Files
forge/claude_artifacts/engineer-20260829-122201.md
T
Dmytro Tkachenko 993a141ead feat(insights): full-width category items with more space
Inside "Alert categories" and "Watch list", the category cards are now a
full-width single-column stack instead of a narrow multi-column grid, with
more breathing room (larger gap, roomier headers + ticket rows, taller
expanded list). Each card was already a click-to-expand accordion and
remains so — CSS-only, index.tsx unchanged. The section-level collapse from
2.3.1 still works (.grid[hidden] preserved).

- Insights.module.scss: .grid grid -> flex column (gap 16); cardHead
  padding 16/20; cardTitle 14px; row padding 8/20; list max-height 440
- bump 2.3.1 -> 2.3.2 (root + client), CHANGELOG [2.3.2]
- engineer artifact + INDEX; verifier-log PASS entry

verifier PASS: reproduced tsc + vite build + npm test 9/9; confirmed
flex-column + .grid[hidden] collapse in compiled CSS; no row-grid
regression; no new dependency.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VEsaHQx8cXr1hFrKU42UK6
2026-08-29 12:24:52 +03:00

1.5 KiB

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-onlyclient/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.