Fix #334: label picker row grid #342

Merged
crueber merged 1 commit from fix/issue-334 into main 2026-09-11 18:14:49 +00:00
Owner

Fixes #334 — label picker rows misaligned/wrapped with multi-word pack names + long descriptions.

Change (web/src/components/LabelPicker.jsx): each row was one flat flex line (name wrapped freely, description truncated with no constrained flex context). Rows are now a three-column grid grid-cols-[auto_minmax(0,1fr)_minmax(0,1fr)] — [check+dot grouped shrink-0] [name whitespace-nowrap + ellipsis] [description truncate min-w-0] — so every row aligns; row title carries the full name + description. Panel widens w-64 → w-80 (320px, inside the #278 100vw-1rem bound — no 390px shrink needed) with the label-drop card hook untouched (opaque + viewport-bound, no new CSS, no new deps).

Preserved: menuitemcheckbox, aria-checked, busy-disable, outside-click/Esc close, native-button keyboard (Tab/Enter/Space free), dark+light (no color change).

MilestonePicker finding (per issue request): checked — its rows are a single text span with no description column, so wrapped titles cannot ragged-shift a sibling column. Left untouched; noted in the doc decision.

Tests: new web/test/unit/label-picker-rows.test.js (grid anatomy, nowrap/truncate, title, semantics, #278 no-regression, 390px arithmetic). Full web unit suite: 658 pass, 0 fail (node --test web/test/unit/*.test.js). vite build + esbuild SDK green; verified the arbitrary grid-cols rule is generated into the shipped CSS. No Go changes (make vet/make cover unaffected).

Browser open: no live-browser proof — the shared obscura daemon blocks loopback targets and workspace rules forbid a private daemon. Visual check (both themes, 390px, zero console errors) left for review.

Fixes #334 — label picker rows misaligned/wrapped with multi-word pack names + long descriptions. **Change** (`web/src/components/LabelPicker.jsx`): each row was one flat flex line (name wrapped freely, description truncated with no constrained flex context). Rows are now a three-column grid `grid-cols-[auto_minmax(0,1fr)_minmax(0,1fr)]` — [check+dot grouped shrink-0] [name `whitespace-nowrap` + ellipsis] [description `truncate min-w-0`] — so every row aligns; row `title` carries the full name + description. Panel widens `w-64` → `w-80` (320px, inside the #278 `100vw-1rem` bound — no 390px shrink needed) with the `label-drop card` hook untouched (opaque + viewport-bound, no new CSS, no new deps). **Preserved**: menuitemcheckbox, aria-checked, busy-disable, outside-click/Esc close, native-button keyboard (Tab/Enter/Space free), dark+light (no color change). **MilestonePicker finding** (per issue request): checked — its rows are a single text span with no description column, so wrapped titles cannot ragged-shift a sibling column. Left untouched; noted in the doc decision. **Tests**: new `web/test/unit/label-picker-rows.test.js` (grid anatomy, nowrap/truncate, title, semantics, #278 no-regression, 390px arithmetic). Full web unit suite: 658 pass, 0 fail (`node --test web/test/unit/*.test.js`). `vite build` + esbuild SDK green; verified the arbitrary grid-cols rule is generated into the shipped CSS. No Go changes (`make vet`/`make cover` unaffected). **Browser open**: no live-browser proof — the shared obscura daemon blocks loopback targets and workspace rules forbid a private daemon. Visual check (both themes, 390px, zero console errors) left for review.
Rows were one flat flex line: multi-word pack names wrapped mid-name
and descriptions truncated at ragged widths. Each row is now
grid-cols-[auto_minmax(0,1fr)_minmax(0,1fr)] ([check+dot] [name nowrap]
[description truncate + min-w-0]); the panel widens w-64 -> w-80 so
'good first issue' fits, inside the #278 viewport bound. Row title
carries name + description. Menu semantics, themes, and keyboard
unchanged; headless cover in web/test/unit/label-picker-rows.test.js;
decision recorded in docs/features/02_issues.md.
Sign in to join this conversation.
No description provided.