fix: enable independent scrolling in sidebar navigation#8846
fix: enable independent scrolling in sidebar navigation#88467487 wants to merge 1 commit intonodejs:mainfrom
Conversation
When sidebar content overflows on desktop, users cannot scroll to see hidden items. Add flex-1 + overflow-y-auto + scroll-smooth to the .navigation class so each sidebar section scrolls independently within the sticky page layout. Co-Authored-By: Claude Opus 4.7 <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
PR SummaryLow Risk Overview Minor formatting/indentation adjustments were made in the same CSS module. Reviewed by Cursor Bugbot for commit 0f23806. Bugbot is set up for automated code reviews on this repo. Configure here. |
👋 Codeowner Review RequestThe following codeowners have been identified for the changed files: Team reviewers: @nodejs/nodejs-website Please review the changes when you have a chance. Thank you! 🙏 |
There was a problem hiding this comment.
Pull request overview
Enables independent scrolling within the desktop sidebar navigation by making the navigation sections flex to fill available space and become vertically scrollable.
Changes:
- Updated sidebar
.navigationstyles to useflex-1andoverflow-y-autofor scrollable sections. - Added smooth scrolling behavior to the navigation scroll container.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @apply ml:flex | ||
| flex-1 | ||
| overflow-y-auto | ||
| scroll-smooth |
There was a problem hiding this comment.
scroll-smooth applies smooth scrolling even when the user has prefers-reduced-motion enabled. Elsewhere in the codebase smooth scrolling is gated behind motion-safe: (e.g., packages/ui-components/src/styles/base.css:14, Containers/Article/index.module.css:39). Consider switching this to motion-safe:scroll-smooth for consistency and accessibility.
| scroll-smooth | |
| motion-safe:scroll-smooth |
| .navigation { | ||
| @apply ml:flex | ||
| .navigation { | ||
| @apply ml:flex |
There was a problem hiding this comment.
In a flex column layout, flex-1 + overflow-y-auto often requires min-h-0 on the flex item to allow it to shrink and actually become scrollable. There’s an existing example of this pattern in Common/Search/Suggestions/index.module.css:3-9. Without min-h-0 here, the navigation may still overflow its parent instead of scrolling.
| @apply ml:flex | |
| @apply ml:flex | |
| min-h-0 |
| flex-1 | ||
| overflow-y-auto | ||
| scroll-smooth |
There was a problem hiding this comment.
.wrapper already applies ml:overflow-auto, and .navigation now adds overflow-y-auto. This creates nested scroll containers on desktop, which commonly leads to double scrollbars / scroll-wheel trapping. If the intent is for the navigation sections to handle scrolling, consider removing or changing the wrapper’s desktop overflow (e.g., to ml:overflow-hidden) so only the intended element scrolls.
| @apply ml:max-w-xs | ||
| ml:overflow-auto | ||
| ml:border-r |
There was a problem hiding this comment.
Indentation in this file is inconsistent with the surrounding CSS module conventions (generally two-space indentation for @apply blocks, e.g. Containers/Footer/index.module.css:4). The extra leading spaces here look accidental and make the file harder to scan; please normalize indentation in this block.
|
Assuming this is related to #8828 ? |
Description
When sidebar content overflows on desktop, users cannot scroll to see hidden items. This PR adds
flex-1,overflow-y-auto, andscroll-smoothto the.navigationclass so each sidebar section scrolls independently within the sticky page layout.Changes
packages/ui-components/src/Containers/Sidebar/index.module.css: addflex-1 overflow-y-auto scroll-smoothto.navigation