fix(issues): design-audit fixes for issues surfaces (issue #211) #5458

Part of the visual-audit sweep for #211 — ISSUES surfaces slice.

Defects fixed

1. WORST-PAGE #1 — issue detail page squeezed into the left half of wide viewports

• Before: on a 1568px viewport the entire detail page (hero, thread, sidebar) rendered in a left-hugging column with the right half of the screen blank. Root cause: src/views/layout.tsx had .issue-detail { max-width: 920px; } with no auto margins, inside a 1920px-wide main.
• After: .issue-detail { max-width: 1080px; margin: 0 auto; } — a centered readable container. With the 240px metadata sidebar, the body column lands at ~800px of comfortable reading width. .issue-detail is used only by the issues detail template, so no other surface is affected.

2. BROKEN — issues list search placeholder displayed the literal text Search issues…

• Before: placeholder="Search issues…" — JSX attribute string literals do not process JS unicode escapes, so the six characters … rendered verbatim in the input.
• After: placeholder={"Search issues…"} — an expression container, where the escape is evaluated by JS and renders as a real ellipsis (…). Matches the file's existing idiom for unicode glyphs ({"○"} etc.).

3. Bunching on the issues list rows

• Row separators now use the hairline var(--border-subtle) token (with var(--border) fallback) per the Natural Light standard.
• Hover state now uses the var(--bg-hover) token instead of an accent color-mix.
• Title/badge cluster gap widened to 6px 10px so label pills and epic/child tags no longer touch the title text when wrapping.
• Metadata line spacing increased (margin-top: 5px → 7px) so "#N opened by …" no longer crowds the title.
• Bulk-select checkboxes given margin-top: 4px to baseline-align with the state icon and title.

Row padding was already at the standard's 14px/18px, and hover + last-child border removal already existed — kept as-is.

Verification

• bunx tsc --noEmit -p . — clean.
• bun test src/__tests__ --test-name-pattern "issue" — 119 pass, 0 fail (100 pattern-skips, pre-existing).

Tokens only, no hardcoded colors, no purple.

🤖 Generated with Claude Code