fix(web): stop the guide reader's progress bar drawing through the header - #164
Merged
Merged
Conversation
…ader The reader pinned its progress bar at `top-16` (64px), but the site header is 69px tall on mobile and 81px from `sm` up. The bar's track therefore drew a grey line straight across the logo and nav, the green fill cut through them as you read, and the percent pill hung below the header into the hero — which is what "the header is overhanging the content" looks like. Give the header height a token, `--tc-header-h`, and let SiteHeader size its own row from it so the token is the single source rather than a number to keep in sync. Everything the reader pins below the header now reads that token: the progress bar's `top`, the sticky contents rail, the section scroll offsets, and the IntersectionObserver rootMargin that decides which entry the rail highlights (it guessed 96px). The bar also drops to z-30 so the header wins the overlap in both directions — previously an open mobile menu had the progress bar painted over it. The header row keeps its exact height (68px / 80px plus the border), so no other page shifts; its contents move from `items-end` to `items-center`, which is what made the logo and nav sit low against the bottom border. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NtfGqzmntTsmXDLWLMgMYW
ThreatCrush Security Scan12 finding(s) HIGH/CRITICAL: 1 | MEDIUM: 6 | LOW: 5
Snippets are redacted; ThreatCrush never prints matched credential material. |
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.
The bug
On
/read/ctem-guidethe reading-progress bar is pinned attop-16(64px), butSiteHeaderis 69px tall on mobile and 81px fromsmup. So the bar lives inside the header:12%pill hangs out the bottom of the header into the content.It also sat at
z-40, the same as the header and later in the DOM, so an open mobile menu got a green line painted over it.The fix
Give the header height a token,
--tc-header-h(69px / 81px atsm), and haveSiteHeadersize its own row from it — so the token is the single source of truth rather than a number two files have to agree on.Everything the reader pins below the header now reads that token instead of guessing:
toptop-16(64px)var(--tc-header-h)lg:top-28calc(var(--tc-header-h) + 2.5rem)scroll-mt-28calc(var(--tc-header-h) + 2.5rem)rootMargin-96pxThe bar drops to
z-30so the header wins the overlap in both directions.Header row
The row keeps its exact height (68px / 80px + 1px border), so no other page shifts. Its contents move from
items-endtoitems-center— the bottom-alignment is the other half of why the header reads as sagging into the content.Verified
Headless Chromium against a
next buildproduction server, 1440×900 and 390×844:masterdocument.scrollWidth === innerWidthat both widthspnpm testinapps/web: 410 passed / 2 failed, 3 failed files — exactly the known pre-existing baseline onmaster(release-docs, scan/code route, usage/topup). Untouched by this change.🤖 Generated with Claude Code
https://claude.ai/code/session_01NtfGqzmntTsmXDLWLMgMYW