Dmytro Tkachenko
993a141ead
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
29 lines
1.5 KiB
Markdown
29 lines
1.5 KiB
Markdown
# 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.
|