fix(markdown): let the document scroll on narrow screens - #1172
Merged
Conversation
The reading shell pinned itself to the viewport — `.main-grid { position:
fixed }` over `html, body { overflow: hidden }` — and scrolled `main` inside
it, so the sidebar could stay put while the article moved. The document
scroller then never moves, and a mobile browser drives both pull-to-refresh
and the collapsing address bar off exactly that scroller, so neither gesture
ever fires.
Below the 1280px breakpoint none of that is being paid for: the sidebar is
already a drawer and the grid is a single column. Unwind the shell back into
normal flow there and hold the header in place with `position: sticky`
instead. Sticky needs a block-level shell — a grid item sticks only within its
own grid area, which for the header is the one row it already fills — and the
rules have to come last in the file, since they override the base layout on
equal specificity. Wider screens keep the fixed grid.
Two consequences of the document becoming the scroller: anchor jumps get
`scroll-padding-top` so a heading clears the sticky header, and the scroll
listener in the store, which until now never fired on mobile, coalesces its
writes to one per frame rather than one per scroll event.
The cloud shell carries the same layout and gets the same treatment.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014nCXuDptSw9FUW4WagZjak
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Merged
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
2 participants
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 reading shell pinned itself to the viewport —
.main-grid { position: fixed }overhtml, body { overflow: hidden }— and scrolledmaininsideit, so the sidebar could stay put while the article moved. The document
scroller then never moves, and a mobile browser drives both pull-to-refresh
and the collapsing address bar off exactly that scroller, so neither gesture
ever fires.
Below the 1280px breakpoint none of that is being paid for: the sidebar is
already a drawer and the grid is a single column. Unwind the shell back into
normal flow there and hold the header in place with
position: stickyinstead. Sticky needs a block-level shell — a grid item sticks only within its
own grid area, which for the header is the one row it already fills — and the
rules have to come last in the file, since they override the base layout on
equal specificity. Wider screens keep the fixed grid.
Two consequences of the document becoming the scroller: anchor jumps get
scroll-padding-topso a heading clears the sticky header, and the scrolllistener in the store, which until now never fired on mobile, coalesces its
writes to one per frame rather than one per scroll event.
The cloud shell carries the same layout and gets the same treatment.
Co-Authored-By: Claude Opus 5 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_014nCXuDptSw9FUW4WagZjak