An audit of the project-detail panel against docs/mockups/project-detail-git.html
turned up 59 differences. The ones that changed what you see:
Controls that had class names but no rules, so they rendered as raw OS widgets:
- .proj-wt-form had no layout at all — the branch input and Create Worktree
button sat flush together, and the button jumped to its own line the moment a
validation error appeared between them.
- .proj-wt-error / .proj-wt-actions-error had no rule, so a validation failure
rendered as 16px near-white body text, indistinguishable from content.
- .proj-wt-remove (the worktree ✕) and .proj-wt-prune had no rule either.
- .proj-fanout-mode never reset `appearance`, so WebKit kept its own light
dropdown — the one control in the panel that stayed a native grey widget.
- --danger was never defined, so every validation message fell back to an
off-palette red.
Cascade bugs — a later rule at equal specificity was silently winning:
- .proj-wt-row-current's amber wash and border were completely dead. "You are
here" rendered identically to every other row.
- .proj-wt-branch inherited the 16px user-agent default in the UI sans, making a
branch name the largest text on the page. Now 13.5px mono.
Layout:
- .proj-syncband dropped flex-wrap. Wrapping produced ragged half-empty rows
between 721px and 1000px — at 900px the Fetch button dropped alone onto a
second row. One cell now absorbs the shrink so the band stays a single row
down to the 720px column break.
- Commit rows are a 4-column grid, not flex, and the ↑ mark cell is rendered on
every row instead of only unpushed ones. Previously no two lines agreed on
where the sha started, so the unpushed group did not read as a group.
- Pushed commit subjects step down to --text-dim, which is what makes the
upstream boundary mean anything.
Honesty of the sync band — the design's two hard rules:
- Green "✓ in sync" was reachable when ahead/behind were UNKNOWN, because
`?? 0` folded undefined into zero. Unknown counts now render "↑ —" / "↓ —"
and are marked unverified. Green requires real zeros and a fresh fetch.
- A stale ↓ painted the digit warning-red. Since a missing FETCH_HEAD is the
default state, the largest glyph in the band was almost always red and the
panel read as "this repo is broken". The doubt now sits on the `unverified`
chip and the footnote, never on the number.
Also: semantic tokens (--sunk/--warn/--ok/--dirty/--mono-font) replacing hex
literals, one chip language across the panel, section headings as tracked caps
with the count as a separate lighter element, and a ≤720px rule that drops the
age column — placed after the base rule, since a media query adds no specificity.
Verified in a real browser at 1280/1000/900/780/721/600/420px: the sync band
holds one row down to 721px and stacks below it, commit columns align on every
row, and nothing overflows or scrolls the page horizontally.
950d2298a1
