Merge pull request 'feat(insights): full-width category items with more space' (#2) from feature/insights-fullwidth-items into main

Reviewed-on: https://gitea.mycloud.dp.ua/Dmitry_Tkachenko/forge/pulls/2

CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to **FORGE** are documented here.
 Format based on [Keep a Changelog](https://keepachangelog.com/); this project uses
 [Semantic Versioning](https://semver.org/).
 
+## [2.3.2] — 2026-08-29
+
+### Changed
+- **PM Insights — full-width category items.** Inside **Alert categories** and
+  **Watch list**, each category is now a **full-width accordion** stacked in a single
+  column (was a narrow multi-column grid), with more breathing room: larger inter-card
+  gap, roomier card headers and ticket rows, and a taller expanded list. The click-to-
+  expand behaviour per category is unchanged. (CSS-only: the `.grid` becomes a flex
+  column; `.cardHead`/`.row` padding widened.)
+
 ## [2.3.1] — 2026-08-29
 
 ### Changed

claude_artifacts/INDEX.md

@@ -1,4 +1,5 @@
 # Artifact index
+- [engineer-20260829-122201](engineer-20260829-122201.md) — PM Insights: category items in "Alert categories" + "Watch list" now full-width single-column accordions with more space (grid→flex column, roomier card/row padding). CSS-only. v2.3.2. verifier PASS.
 - [engineer-20260829-120746](engineer-20260829-120746.md) — PM Insights: "Alert categories" + "Watch list" now collapsible accordions (new `Section`, `ChevronIcon`, `.grid[hidden]` collapse, `aria-expanded`/`aria-controls`). v2.3.1. verifier PASS.
 - [engineer-20260827-190753](engineer-20260827-190753.md) — Jira statusDurations+movements + chart #17 (Active tab), /api/analytics/jira-durations, seed-enriched from board_state. v2.3.0.
 - [engineer-20260827-185932](engineer-20260827-185932.md) — Extension Jira sync (SNOW→Jira, attach-only /api/sync/jira, custom-domain + PAT). v2.2.0. Live-verified attach-only.

claude_artifacts/engineer-20260829-122201.md

@@ -0,0 +1,28 @@
+# 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.

claude_artifacts/verifier-log.md

@@ -17,3 +17,4 @@
 - 2026-08-27 19:11 · engineer · Jira statusDurations+movements+chart #17 · VERDICT: PASS · re-ran: server+client tsc=0, root vitest 3/3, client vitest 6/6, live SQL agg on tickets(jira?statusDurations)=73 rows, booted dist+curl endpoint · probed: 401 unauth (got 401), min-2 filter drops Cancelled n=1, ordering known-workflow-first + extras avgDays-desc, ms/86.4M day math matches SQL exactly (UAT 16.14d/21, Closed 23.51d/16, InProgress 4.90d/37), guards NaN/<=0, client null-safe (jiraDur=[] + length>0 gate), static SQL no user input, additive jsonb no DDL · PASS
 - 2026-08-29 11:20 · devops · SSH NAS host → mycloud.dp.ua:2323 · VERDICT: PASS · re-ran: grep 192.168.50.2 (only comment+artifact), grep NAS_HOST (all mycloud), bash -n push-to-nas.sh OK · probed: all ssh/scp/rsync hops use $NAS_HOST not hardcoded IP; port 2323 preserved; illustrative comment+historical artifact intentional · PASS
 - 2026-08-29 12:07 · engineer · Insights alert/watch sections as accordions · VERDICT: PASS · re-ran: tsc -p (clean), vite build (139 modules, exit 0), grep compiled CSS (.grid[hidden]{display:none} present, specificity/order beats .grid), token defs in globals.scss · probed: collapse hides grid via hidden+override; aria-controls id always-rendered (no dangling ref when collapsed); unique slugs alert-categories/watch-list (no dup id); per-card open state diff-unchanged (no regression); chevron rotate(90deg) bound to aria-expanded=true · PASS
+- 2026-08-29 12:23 · designer/engineer · Insights full-width accordion items (CSS) · VERDICT: PASS · re-ran: vite build OK, tsc clean, npm test 9/9 (client 6 + root 3), grepped dist CSS · probed: section hidden-collapse specificity (.grid[hidden] 0,2,0 beats .grid 0,1,0 → display:none wins), flex-column full-width via default align-items:stretch, .row internal grid columns intact + tokens compile (sass would error if undefined) · PASS

client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "forge-client",
   "private": true,
-  "version": "2.3.1",
+  "version": "2.3.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

client/src/pages/Insights/Insights.module.scss

@@ -54,10 +54,9 @@
 }
 
 .grid {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  flex-direction: column;
-  gap: $s-3;
+  gap: $s-4;
-  align-items: start;
 }
 .grid[hidden] { display: none; }
 
@@ -75,13 +74,13 @@
   align-items: center;
   justify-content: space-between;
   gap: $s-3;
-  padding: 12px 14px;
+  padding: $s-4 $s-5;
   border: none;
   background: transparent;
   cursor: pointer;
   &:hover { background: var(--surface-alt); }
 }
-.cardTitle { font-size: 13px; font-weight: 600; color: var(--text); }
+.cardTitle { font-size: 14px; font-weight: 600; color: var(--text); }
 .counts { display: flex; align-items: center; gap: 6px; }
 .problem {
   min-width: 22px; text-align: center; font-size: 11px; font-weight: 700;
@@ -92,18 +91,18 @@
   padding: 1px 7px; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted);
 }
 
-.list { list-style: none; border-top: 1px solid var(--border); max-height: 340px; overflow-y: auto; }
+.list { list-style: none; border-top: 1px solid var(--border); max-height: 440px; overflow-y: auto; }
 .row {
   display: grid;
   grid-template-columns: auto 1fr auto auto auto;
   align-items: center;
   gap: $s-2;
-  padding: 6px 14px;
+  padding: $s-2 $s-5;
   font-size: 12px;
   border-bottom: 1px solid var(--border);
   &:last-child { border-bottom: none; }
 }
-.emptyRow { padding: 10px 14px; color: var(--text-dim); font-size: 12px; }
+.emptyRow { padding: $s-3 $s-5; color: var(--text-dim); font-size: 12px; }
 .rowNum { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-weight: 700; color: var(--primary); white-space: nowrap; }
 .rowDesc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
 .rowMeta { color: var(--text-muted); white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "forge",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "FORGE 2.0 — ServiceNow ticket analytics portal (RITM/SCTASK) with roles, PM insights, and a Chrome sync extension",
   "main": "dist/index.js",
   "private": true,