fix(docs): allow page scroll to chain past code blocks#24
Merged
max-wells merged 1 commit intorust-ui:mainfrom Apr 12, 2026
Merged
fix(docs): allow page scroll to chain past code blocks#24max-wells merged 1 commit intorust-ui:mainfrom
max-wells merged 1 commit intorust-ui:mainfrom
Conversation
Resolves rust-ui#15. Removes `overscroll-y-contain` from the syntax-highlighted code block components used in component documentation pages. The Tailwind class `overscroll-behavior-y: contain` was preventing scroll chaining when the cursor was inside an overflowing code block: trackpad momentum was being absorbed by the inner element instead of bubbling up to the page, leaving the page unscrollable for several seconds. Removing it restores the browser's default scroll-chaining behaviour so the page continues scrolling once the code block reaches its boundary. Sheet, Drawer, and sidenav demos still keep `overscroll-y-contain` because they are interactive overlays where the trap is intentional.
Contributor
|
Thanks again @mp-c0de — two contributions in two days, appreciate it! 🙌 |
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.
Summary
Resolves #15.
The
overscroll-y-containTailwind class on the syntax-highlighted code block components was trapping scroll events. When the cursor was inside an overflowing code block, trackpad momentum got absorbed by the inner element instead of chaining up to the page, leaving the page unscrollable for several seconds (most noticeable in Chrome on macOS, where overscroll-behavior is strictly enforced; Safari is more lenient).Changes
Removes
overscroll-y-containfrom two read-only display components:crates/_markdown_crate/src/leptos/components/syntect_highlighter_code.rs:16— theSyntectHighlighterCodecomponent used for inline code in component docsapp_crates/app_components/src/tree_view.rs:130— theFileRendererHighlighthighlighted file viewer in tree viewsWhy these are safe to change
These two components are passive read-only displays of code. The user's natural intent when scrolling over them is to navigate the docs page, not the code block. Removing
overscroll-y-containrestores the browser default of scroll chaining so the page continues scrolling once the code block reaches its boundary.What is intentionally NOT changed
overscroll-y-containis left intact in:app_crates/registry/src/ui/sheet.rs:101— the Sheet modal component, where the trap is the desired behaviour for an interactive overlayapp/src/components/shared_sidenav_demos.rs:20— sidenav demo wrapper, where the panel should scroll independentlyTest plan
cargo leptos watch