Skip to content

Add /display left-rail CSS source map and permanent fidelity guard test - #400

Merged
WilfordGrimley merged 1 commit into
masterfrom
display-left-rail-css-source-map
Jul 23, 2026
Merged

Add /display left-rail CSS source map and permanent fidelity guard test#400
WilfordGrimley merged 1 commit into
masterfrom
display-left-rail-css-source-map

Conversation

@WilfordGrimley

Copy link
Copy Markdown

Description

Two-part CSS-fidelity task on the /display left rail
(docs/proposals/mockups/proposal-h/SPEC-display-left-rail.md), triggered by
PR #352 shipping and then having to separately fix its own §2 density-table
regression ("Fix left-rail CSS fidelity regressions vs
SPEC-display-left-rail.md").

1. Source map. Traced every §0 (theme token) and §2 (density) binding
value to where it actually resolves in the code today. Full table lives in
the spec file's new §12 Source map addendum — summary:

Category Finding
Most §2 padding/margin/gap values (rail header, artist line, D14 band, Select Version wrapper, unified filter fieldset, .vgrid grid, Slot Actions stack, Sources bulk row/list) Already component-scoped inline styles or styled() rules — safe, no action needed
§0 theme tokens ($body-bg, $secondary, $primary, $success, etc.) Intentionally global via bootswatch/superhero SCSS + Bootstrap variant classes — correct pattern, not a bug
AutofillCollapse header padding 7px 10px This is the actual recurrence mechanism. Was a RailRoot-level .card-header{padding:7px 10px} plain descendant selector living two files away from Card.Header, clobbering Bootstrap's global card.scss rule by selector specificity instead of by scope — exactly the "pinned in a higher location than expected" pattern. Fixed: added an additive, optional headerPadding?: string prop directly on AutofillCollapse.tsx, passed at each rail call site (RailSection, SourcesAccordion). Every other caller (CardDetailedViewBody/PDFGenerator/JumpToVersion/CardResultSet/GridSelectorFilters) omits the prop and is byte-for-byte unchanged.
AutofillCollapse header background Found and fixed a real, independent drift while in the file: hardcoded #4E5D6B was one hex digit off the actual $secondary token (#4e5d6c) — never sourced from the theme at all. Corrected to the exact value.
Container gutter under AutofillCollapse body pad={2} Judgment item, not re-verified this pass — the spec's own §2 row already flagged "verify no double gutter"; still resolves through Bootstrap's global --bs-gutter-x, listed as an open risk in the addendum, not fixed here
D14 band's literal hex colors (.d14/.seticon/.score/.statepill) Accepted trade-off, not fixed: spec §0 deliberately calls for literal-extracted values over CSS variables, so these are immune to Bootstrap clobber but won't auto-track a future theme-token edit — noted, not addressed (would need a larger CSS-custom-property refactor)

2. Permanent fidelity guard. Added frontend/tests/DisplayLeftRailFidelity.spec.ts
— asserts real getComputedStyle values (toHaveCSS, not class names or
source text) against the spec's own literal §0/§2 binding values, reusing
SelectVersionSection.spec.ts's navigation flow (now hoisted into
test-utils.ts's openSelectVersionSection so both files share it, rather
than one spec importing from another). Comments in the new spec point back
to SPEC-display-left-rail.md as source of truth so future edits update both
deliberately.

Checklist

  • I have installed pre-commit and installed the hooks with pre-commit install before creating any commits.
  • I have updated any related tests for code I modified or added new tests where appropriate — new DisplayLeftRailFidelity.spec.ts.
  • I have manually tested my changes as follows:
    • Ran the new fidelity spec twice locally (both green): npx playwright test tests/DisplayLeftRailFidelity.spec.ts --project=chromium.
    • Ran SelectVersionSection.spec.ts (7/7 green) to confirm the shared-helper refactor didn't regress issue Select Version section build (blocked on PR #116) #167's own coverage.
    • Ran PDFGenerator.spec.ts and GridSelectorModal.spec.ts alone (both fully green) to confirm the other AutofillCollapse callers are unaffected by the new headerPadding prop.
    • Full jest suite: 568/568 passed. tsc --noEmit: clean.
    • npx prettier@2.7.1 --check on all changed files: clean.
    • Note: DisplayPage.spec.ts/DisplaySlotStates.spec.ts show occasional timing flakes under heavy worker parallelism in this sandbox — reproduced identically on pristine master with the same worker count (not caused by this change); each passes cleanly alone or with --workers=1.
  • I have updated any relevant documentation or created new documentation where appropriate — SPEC-display-left-rail.md's new §12 Source map addendum, edited in place.

PR #352 shipped, then separately fixed, its own §2 density-table
regression: values documented as done but never landed as real CSS
because the override lived in a wrapper two files away from the
component it targeted, clobbering a Bootstrap global by specificity
instead of scope. Traces every spec binding to its actual source in
SPEC-display-left-rail.md's new addendum, retires that clobber pattern
for the AutofillCollapse header padding via an additive headerPadding
prop, fixes an unrelated 1-hex-digit color drift found along the way,
and adds DisplayLeftRailFidelity.spec.ts to assert real computed
styles so a future silent revert fails CI instead of shipping unnoticed.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@WilfordGrimley
WilfordGrimley merged commit 0a47910 into master Jul 23, 2026
12 checks passed
WilfordGrimley added a commit that referenced this pull request Jul 23, 2026
Throwaway computed-style diff against the corrected mockup caught 63
mismatches beyond the O1 divider round: mostly Bootstrap body-default
(16px) font-size fall-throughs on bespoke rail classnames that never had
their own font-size rule (rail-head .slot/.name, artist-line,
select-version-heading, Sources filter input, all fixed component-scoped
per the #400 rule), plus the Source row's own border-bottom (missed by
O1's named list), the tile corner tag (8px/alpha .9 -> 7px/.92), and the
Ghost tile's UA-default button padding.

Per explicit owner ruling, also resolves the three rows held back
pending sign-off: AutofillCollapse header background reverts to #4E5D6B
(#400 mis-corrected this to #4e5d6c - deliberately distinct token, not a
typo), the Source toggle is restyled (scoped to a new
rail-source-toggle class) from react-bootstrap-toggle's stock sliding
switch into the mockup's static two-cell segmented look, and the
Filters disclosure toggle returns to real Bootstrap sm metrics (14px/4px
8px), superseding the earlier "buttons are too big" shrink for that one
control only.

Also removes the stray border-light Bootstrap utility from
AutofillCollapse's header (no spec calls for it).

DisplayLeftRailFidelity.spec.ts asserts every fixed value. Deliberately
left open: "Demoted body" 13px (blast radius across four other
untested demoted sections not verified this round).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
WilfordGrimley added a commit that referenced this pull request Jul 24, 2026
…401)

* Normalize /display left rail dividers to #16202b (O1 fidelity round)

Corrected SPEC-display-left-rail.md round: retires the ambiguous
Bootstrap .border-bottom utility on .rail-head/.artist-line/.sources,
adds a boundary to the Select Version wrapper, and normalizes the
unified filter fieldset + its internal divider - all to the explicit
#16202b hairline .d14 already used. Spec doc + mockup updated in place;
DisplayLeftRailFidelity.spec.ts asserts the new values; adds a pin
localStorage-persists-across-reload Playwright test. Leaves the spec's
.btn-sm 14px/4x8 row unimplemented pending an explicit owner call (it
conflicts with the already-shipped "buttons are too big" fix) - flagged
in the spec/docs/tests.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* Fix machine-diff mismatches vs corrected /display rail mockup

Throwaway computed-style diff against the corrected mockup caught 63
mismatches beyond the O1 divider round: mostly Bootstrap body-default
(16px) font-size fall-throughs on bespoke rail classnames that never had
their own font-size rule (rail-head .slot/.name, artist-line,
select-version-heading, Sources filter input, all fixed component-scoped
per the #400 rule), plus the Source row's own border-bottom (missed by
O1's named list), the tile corner tag (8px/alpha .9 -> 7px/.92), and the
Ghost tile's UA-default button padding.

Per explicit owner ruling, also resolves the three rows held back
pending sign-off: AutofillCollapse header background reverts to #4E5D6B
(#400 mis-corrected this to #4e5d6c - deliberately distinct token, not a
typo), the Source toggle is restyled (scoped to a new
rail-source-toggle class) from react-bootstrap-toggle's stock sliding
switch into the mockup's static two-cell segmented look, and the
Filters disclosure toggle returns to real Bootstrap sm metrics (14px/4px
8px), superseding the earlier "buttons are too big" shrink for that one
control only.

Also removes the stray border-light Bootstrap utility from
AutofillCollapse's header (no spec calls for it).

DisplayLeftRailFidelity.spec.ts asserts every fixed value. Deliberately
left open: "Demoted body" 13px (blast radius across four other
untested demoted sections not verified this round).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant