docs: fix clipped scroll area of sidebar and table of contents - #584
Closed
fabian-hiller wants to merge 1 commit into
Closed
docs: fix clipped scroll area of sidebar and table of contents#584fabian-hiller wants to merge 1 commit into
fabian-hiller wants to merge 1 commit into
Conversation
The sidebar nav and "On this page" nav were scroll containers whose bounds started 2rem below the header and ended 2rem above the viewport bottom, because the vertical spacing lived as padding on the wrapping <aside>. Once the list was long enough to scroll, items were clipped mid-letter at those floating boundaries. Move the vertical spacing inside the scroll containers instead, so the scrollable area spans the full height below the header. Since overflow clips at the padding edge, scrolled items now stay visible through the padding zone and disappear cleanly at the header border and viewport bottom, and the resting layout is unchanged.
Author
|
I asked Claude to create this PR. I recommend checking it before you merge it. |
|
Thanks for the contribution! We're closing this PR and moving the conversation to the issue: #589 We've moved to a model where bugs and feature proposals are discussed in issues/discussions before code review, so the community can help prioritize and shape the work. Your branch is linked from the new thread so the implementation isn't lost — please join us there to continue the conversation. — astrobot 🤖 |
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.
What
On
/docs/*pages, the sidebar navigation (and the "On this page" table of contents) is astickyscroll container withoverflow-y-auto. Its bounds currently start 2rem below the header and end 2rem above the viewport bottom, because the vertical spacing lives aspt/pbpadding on the wrapping<aside>— outside the scroll container. As soon as the list is long enough to scroll, items get chopped mid-letter at those floating boundaries, with dead zones above and below.Fix
Move the vertical spacing inside the scroll containers: the nav now spans the full height below the header (
top: var(--docs-header-height),max-height: calc(100vh - var(--docs-header-height))) and carries the spacing itself aspt-[var(--docs-aside-top)] pb-8. Because overflow clips at the padding edge, scrolled items remain visible while passing through the padding zone and disappear cleanly at the header border and the viewport bottom.The resting (unscrolled) layout is pixel-identical: the first item still sits 2rem below the header.
Testing
Verified locally with
astro devat various viewport heights and scroll positions on/docs/guide/channels/, comparing against production. Both the sidebar and the table of contents scroll their full content and no longer clip items at the floating boundaries.