From 993a141eadf6b212477c21b62046b6f59de11bfd Mon Sep 17 00:00:00 2001 From: Dmytro Tkachenko Date: Sat, 29 Aug 2026 12:24:52 +0300 Subject: [PATCH] feat(insights): full-width category items with more space MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Claude-Session: https://claude.ai/code/session_01VEsaHQx8cXr1hFrKU42UK6 --- CHANGELOG.md | 10 +++++++ claude_artifacts/INDEX.md | 1 + claude_artifacts/engineer-20260829-122201.md | 28 +++++++++++++++++++ claude_artifacts/verifier-log.md | 1 + client/package.json | 2 +- .../src/pages/Insights/Insights.module.scss | 17 ++++++----- package.json | 2 +- 7 files changed, 50 insertions(+), 11 deletions(-) create mode 100644 claude_artifacts/engineer-20260829-122201.md diff --git a/CHANGELOG.md b/CHANGELOG.md index c7589c0..b7e1d2d 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/claude_artifacts/INDEX.md b/claude_artifacts/INDEX.md index 187d0cf..ad6186f 100644 --- a/claude_artifacts/INDEX.md +++ b/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. diff --git a/claude_artifacts/engineer-20260829-122201.md b/claude_artifacts/engineer-20260829-122201.md new file mode 100644 index 0000000..2cdea66 --- /dev/null +++ b/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. diff --git a/claude_artifacts/verifier-log.md b/claude_artifacts/verifier-log.md index e6cc0c6..ca4161a 100644 --- a/claude_artifacts/verifier-log.md +++ b/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 diff --git a/client/package.json b/client/package.json index 6e77e82..27a961e 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/pages/Insights/Insights.module.scss b/client/src/pages/Insights/Insights.module.scss index e534e96..09d653a 100644 --- a/client/src/pages/Insights/Insights.module.scss +++ b/client/src/pages/Insights/Insights.module.scss @@ -54,10 +54,9 @@ } .grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: $s-3; - align-items: start; + display: flex; + flex-direction: column; + gap: $s-4; } .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; } diff --git a/package.json b/package.json index d3158b6..ed64b12 100644 --- a/package.json +++ b/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,