fix(nav): drop the logo mark's dot, keep L centred and rotating - #40
Merged
Conversation
The mark paired "L" with a "." that faded and collapsed on scroll. That pairing went through two rounds of alignment bugs in a row: 1. (#37) The dot faded via `opacity` alone. Opacity doesn't remove layout width, so the invisible dot kept reserving space inside the square's `justify-content: center` box, pushing "L" off centre. 2. Even after that fix, the dot's `inline-block` defaulted to `vertical-align: baseline`, which (per spec, once `overflow-hidden` is set) aligns the dot's own bottom edge to L's text baseline rather than to L's visible bottom - measured 4-6px of gap depending on the icon's font size, the dot visibly floating above where it should rest. Two fixable bugs on the same pairing is a sign the pairing itself is the wrong shape for this animation, not that the next fix will be the last one. Dropped the dot: "L" alone, centred, rotating, has no second element to misalign against, and no bug class from either regression above can recur. Verified via Playwright measurement (not just visual review): "L" sits within <1px of the square's true centre at every scroll checkpoint from 0-200px, and the square's transform is non-identity once fully scrolled and returns to "none" at rest. Stress-tested 8 consecutive runs across chromium/mobile-chromium/mobile-webkit with zero flakes. The e2e test is rewritten to match: it no longer asserts anything about a dot, since there isn't one, only that "L" stays centred through the full transition and that the square actually rotates.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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.
Why
The header icon mark paired "L" with a "." that faded and collapsed on scroll. That pairing went through two rounds of alignment bugs in a row:
opacityalone. Opacity doesn't remove layout width, so the invisible dot kept reserving space inside the square'sjustify-content: centerbox, pushing "L" off centre.inline-blockdefaulted tovertical-align: baseline, which — per spec, onceoverflow-hiddenis set — aligns the dot's own bottom edge to L's text baseline rather than to L's visible bottom. Measured 4-6px of gap depending on the icon's font size: the dot visibly floated above where it should rest.Two fixable bugs on the same pairing in a row is a signal the pairing itself is the wrong shape for this animation, not that the next fix will be the last one. This PR drops the dot entirely: "L" alone, centred, rotating, has no second element to misalign against, and neither bug class above can recur.
What changed
nav.tsx: removed the dot span, itsdotOpacity/dotWidthmotion values, and the two rounds of alignment comments that no longer apply. "L" alone now renders in the icon square.site-header-logo-mark.spec.ts: rewritten to match — asserts "L" stays within 3px of the square's true horizontal centre at every scroll checkpoint (0-200px), and that the square's rotation actually changes (non-noneat full scroll, back tononeat rest). No dot-related assertions remain, since there's no dot.Verification
typecheck,typecheck:test,lint,content-lintall cleanuseScroll()gap from test(nav): lock in the logo mark's same-line, centred scroll transition #38, unrelated to this change)Heads up on CI
Same caveat as #35/#37/#38/#39:
main'sverifygate has had intermittent pre-existing failures unrelated to any of these nav diffs (a sitewide WCAG regression, a flaky total-blocking-time budget, and separately a flaky nav-dropdown timing test under full-suite load). If still present, the same bypass situation may apply.