fix(toc): sticky TOC left a large gap before the post header on desktop#320
Merged
Conversation
.post-article has no explicit grid-template-rows, so the TOC's 'grid-row: 1 / -1' resolved to just row 1 and inflated it to the TOC's own ~565px height — pushing the post header down and leaving a large empty gap between the breadcrumb and the title on >=1280px. Span all content rows explicitly instead. Verified in Chrome: header now sits directly below the breadcrumb, aligned with the TOC top. 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
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.
On ≥1280px, the 'On this page' rail inflated the grid's first row and shoved the post title/header ~565px down, leaving a big empty gap after the breadcrumb (reported on the oklch post).
Cause:
.post-articlehas no explicitgrid-template-rows, so the TOC'sgrid-row: 1 / -1resolved to row 1 only and sized that row to the TOC's own height. Fix: span all content rows explicitly (1 / span 99); empty implicit rows stay 0-height. Diagnosed and verified in Chrome at 1440px — header now sits directly below the breadcrumb, aligned with the TOC top. CSS-only.🤖 Generated with Claude Code