Releases/pulls meta rows render concatenated ("this is a title9 hours ago1 assets") — .card-meta has no CSS rule #277

New issue

Closed

opened 2026-09-10 11:19:50 +00:00 by crueber · 3 comments

crueber commented

2026-09-10 11:19:50 +00:00

Owner

What's wrong

Meta rows in the releases/pulls pages render their spans concatenated without any separation: the release row on /releases at mobile width literally reads

this is a title9 hours ago1 assets

(title + publish date + asset count glued together). Confirmed in the live DOM: .card-meta innerHTML is three adjacent s, and no CSS rule for .card-meta exists anywhere in the stylesheets — the class is referenced in web/src/pages/Releases.jsx, Release.jsx, Pulls.jsx, and Pull.jsx but never styled (no display, no gap, no margins). It only looked spaced on desktop by accident of viewport width; on mobile the wraps make the missing spacing obvious, and even on desktop the spans run together.

Evidence

Live DOM at 390px: .card-meta = this is a title<time>9 hours ago</time>1 assets — computed display block-ish with no gap.
Grep: card-meta appears in the four pages above; zero CSS rules match card-meta in web/css/*.css or web/src/ui.css.

Fix direction

Give .card-meta a real rule in web/css/repo.css (where the sibling .card-* classes live): flex row, gap: 0.5rem, wrap allowed, muted color — matching the visual intent of the existing usages.
Audit the four pages' .card-meta usages for separator semantics (some may want explicit · separators like the repo header uses).
Acceptance: release/pull rows show visually separated title · date · asset-count on mobile and desktop; the fix is a CSS-level rule, not per-page spacing hacks.

## What's wrong Meta rows in the releases/pulls pages render their spans **concatenated without any separation**: the release row on `/releases` at mobile width literally reads ``` this is a title9 hours ago1 assets ``` (title + publish date + asset count glued together). Confirmed in the live DOM: `.card-meta` innerHTML is three adjacent ``s, and no CSS rule for `.card-meta` exists anywhere in the stylesheets — the class is referenced in `web/src/pages/Releases.jsx`, `Release.jsx`, `Pulls.jsx`, and `Pull.jsx` but never styled (no `display`, no `gap`, no margins). It only *looked* spaced on desktop by accident of viewport width; on mobile the wraps make the missing spacing obvious, and even on desktop the spans run together. ## Evidence - Live DOM at 390px: `.card-meta` = `this is a title<time>9 hours ago</time>1 assets` — computed display block-ish with no gap. - Grep: `card-meta` appears in the four pages above; zero CSS rules match `card-meta` in `web/css/*.css` or `web/src/ui.css`. ## Fix direction - Give `.card-meta` a real rule in `web/css/repo.css` (where the sibling `.card-*` classes live): flex row, `gap: 0.5rem`, wrap allowed, muted color — matching the visual intent of the existing usages. - Audit the four pages' `.card-meta` usages for separator semantics (some may want explicit `·` separators like the repo header uses). - Acceptance: release/pull rows show visually separated title · date · asset-count on mobile and desktop; the fix is a CSS-level rule, not per-page spacing hacks.

crueber referenced this issue from a commit

2026-09-10 13:32:38 +00:00

Fix #277: card-meta CSS rule in live stylesheet + separators (12_web_ui)

crueber referenced this issue from a pull request that will close it,

2026-09-10 13:32:49 +00:00

Fix #277: card-meta CSS rule #287

crueber commented

2026-09-10 13:32:53 +00:00

Author

Owner

Fix PR: #287 — real .card-meta rule (flex row, gap, wrap, muted, dark+light) in the LIVE web/src/ui.css (not dead web/css/repo.css), plus · separators in Pulls.jsx/Pull.jsx consistent with the repo header. Two corrections to the issue body: only 2 card-meta uses remain (#270 redesigned Releases/Release with Tailwind-inline rows), and the rule belongs in ui.css. Audit found more rule-less classes used in the same files (card-list, card-title, btn-primary, link, field) — reported in the PR, unfixed, each needs its own issue. node --test 552/552 green, vite build green; browser proof open (loopback guard).

Fix PR: https://git.packden.us/crueber/walhub/pulls/287 — real `.card-meta` rule (flex row, gap, wrap, muted, dark+light) in the LIVE `web/src/ui.css` (not dead `web/css/repo.css`), plus `·` separators in Pulls.jsx/Pull.jsx consistent with the repo header. Two corrections to the issue body: only 2 `card-meta` uses remain (#270 redesigned Releases/Release with Tailwind-inline rows), and the rule belongs in ui.css. Audit found more rule-less classes used in the same files (`card-list`, `card-title`, `btn-primary`, `link`, `field`) — reported in the PR, unfixed, each needs its own issue. `node --test` 552/552 green, `vite build` green; browser proof open (loopback guard).

crueber commented

2026-09-10 13:47:03 +00:00

Author

Owner

Review of PR #287 (fix/issue-277, commit 2cd0487) — verified in scratch worktree, main worktree untouched. No browser used (node tests + reasoning only, per instructions).

FINDINGS (all checks pass, no fixes needed):

Rule placement (web/src/ui.css:32): CORRECT. Rule lives in the live stylesheet; web/css/repo.css untouched (zero diff vs main, 0 card-meta matches, last touched by #214) and unbundled — SPA entry web/src/index.jsx:6 imports only ./ui.css. The issue body's suggested location is rightly corrected in code comment + doc entry.
Rule shape: CORRECT. .card-meta = mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-zinc-500 dark:text-zinc-400 — flex+wrap+gap, muted both themes, dark variant present in source AND compiled CSS (.card-meta:where(.dark,.dark *){color:zinc-400}).
Separators: CORRECT. Pulls.jsx:103-112 chip then ref-range gap-spaced with no separator (no doubles), then · author · date. Pull.jsx:122-127 author · badge · date. Matches the { · } idiom used at 10 existing sites (Commits, Commit, ThreadTimeline, CheckDetail).
Only-2-uses claim: CONFIRMED by own grep — card-meta markup exists only in Pulls.jsx + Pull.jsx (+ rule + new test). No Releases/Release matches (post-#270 Tailwind-inline redesign).
card-list (Pulls/Pull/Checks) + card-title (Pulls rows): confirmed rule-less everywhere, correctly left alone — doc reports them as out-of-scope, no drive-by.
No new deps: name-only diff = 12_web_ui.md, Pull.jsx, Pulls.jsx, ui.css, card-meta.test.js. No package.json/lock changes.
Doc entry (12_web_ui.md): accurate — placement correction, scope note, sibling-hook audit, honest open browser proof.

VERIFICATION: node --test web/test/unit/card-meta.test.js 4/4 pass; full suite 552/552 pass (note: scratch worktree needed web/node_modules copied from main worktree for marked/dompurify imports — environmental, not a PR issue); vite build green (141 modules, 1.81s); .card-meta + dark variant confirmed in dist CSS.

MERGE RECOMMENDATION: ready to merge.

Review of PR #287 (fix/issue-277, commit 2cd0487) — verified in scratch worktree, main worktree untouched. No browser used (node tests + reasoning only, per instructions). FINDINGS (all checks pass, no fixes needed): 1. Rule placement (web/src/ui.css:32): CORRECT. Rule lives in the live stylesheet; web/css/repo.css untouched (zero diff vs main, 0 card-meta matches, last touched by #214) and unbundled — SPA entry web/src/index.jsx:6 imports only ./ui.css. The issue body's suggested location is rightly corrected in code comment + doc entry. 2. Rule shape: CORRECT. .card-meta = mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-zinc-500 dark:text-zinc-400 — flex+wrap+gap, muted both themes, dark variant present in source AND compiled CSS (.card-meta:where(.dark,.dark *){color:zinc-400}). 3. Separators: CORRECT. Pulls.jsx:103-112 chip then ref-range gap-spaced with no separator (no doubles), then · author · date. Pull.jsx:122-127 author · badge · date. Matches the { · } idiom used at 10 existing sites (Commits, Commit, ThreadTimeline, CheckDetail). 4. Only-2-uses claim: CONFIRMED by own grep — card-meta markup exists only in Pulls.jsx + Pull.jsx (+ rule + new test). No Releases/Release matches (post-#270 Tailwind-inline redesign). 5. card-list (Pulls/Pull/Checks) + card-title (Pulls rows): confirmed rule-less everywhere, correctly left alone — doc reports them as out-of-scope, no drive-by. 6. No new deps: name-only diff = 12_web_ui.md, Pull.jsx, Pulls.jsx, ui.css, card-meta.test.js. No package.json/lock changes. 7. Doc entry (12_web_ui.md): accurate — placement correction, scope note, sibling-hook audit, honest open browser proof. VERIFICATION: node --test web/test/unit/card-meta.test.js 4/4 pass; full suite 552/552 pass (note: scratch worktree needed web/node_modules copied from main worktree for marked/dompurify imports — environmental, not a PR issue); vite build green (141 modules, 1.81s); .card-meta + dark variant confirmed in dist CSS. MERGE RECOMMENDATION: ready to merge.

crueber closed this issue

2026-09-10 13:48:18 +00:00

crueber referenced this issue from a commit

2026-09-10 13:48:18 +00:00

Merge pull request 'Fix #277: card-meta CSS rule' (#287) from fix/issue-277 into main

crueber commented

2026-09-10 13:48:18 +00:00

Author

Owner

Fixed by PR #287 (review clean; live-stylesheet rule + separators verified; 552/552), merged. Closing.

crueber added the

releases