Add /display left-rail CSS source map and permanent fidelity guard test - #400
Merged
Merged
Conversation
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
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>
4 tasks
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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Two-part CSS-fidelity task on the
/displayleft rail(
docs/proposals/mockups/proposal-h/SPEC-display-left-rail.md), triggered byPR #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:
.vgridgrid, Slot Actions stack, Sources bulk row/list)styled()rules — safe, no action needed$body-bg,$secondary,$primary,$success, etc.)7px 10pxRailRoot-level.card-header{padding:7px 10px}plain descendant selector living two files away fromCard.Header, clobbering Bootstrap's globalcard.scssrule by selector specificity instead of by scope — exactly the "pinned in a higher location than expected" pattern. Fixed: added an additive, optionalheaderPadding?: stringprop directly onAutofillCollapse.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.#4E5D6Bwas one hex digit off the actual$secondarytoken (#4e5d6c) — never sourced from the theme at all. Corrected to the exact value.AutofillCollapsebodypad={2}--bs-gutter-x, listed as an open risk in the addendum, not fixed here.d14/.seticon/.score/.statepill)2. Permanent fidelity guard. Added
frontend/tests/DisplayLeftRailFidelity.spec.ts— asserts real
getComputedStylevalues (toHaveCSS, not class names orsource text) against the spec's own literal §0/§2 binding values, reusing
SelectVersionSection.spec.ts's navigation flow (now hoisted intotest-utils.ts'sopenSelectVersionSectionso both files share it, ratherthan one spec importing from another). Comments in the new spec point back
to
SPEC-display-left-rail.mdas source of truth so future edits update bothdeliberately.
Checklist
pre-commitand installed the hooks withpre-commit installbefore creating any commits.DisplayLeftRailFidelity.spec.ts.npx playwright test tests/DisplayLeftRailFidelity.spec.ts --project=chromium.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.PDFGenerator.spec.tsandGridSelectorModal.spec.tsalone (both fully green) to confirm the otherAutofillCollapsecallers are unaffected by the newheaderPaddingprop.tsc --noEmit: clean.npx prettier@2.7.1 --checkon all changed files: clean.DisplayPage.spec.ts/DisplaySlotStates.spec.tsshow occasional timing flakes under heavy worker parallelism in this sandbox — reproduced identically on pristinemasterwith the same worker count (not caused by this change); each passes cleanly alone or with--workers=1.SPEC-display-left-rail.md's new §12 Source map addendum, edited in place.