Skip to content

fix: add overflow-auto to sidebar navigation (#8521) #8844

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
7487 wants to merge 2 commits into from
+7 −9
Closed

fix: add overflow-auto to sidebar navigation (#8521) #8844

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1e67e28
chore: remove unmaintained mastodon link from footer (#7873)
7487 Apr 25, 2026
9d673ae
fix: add overflow-auto to sidebar navigation (#8521)
7487 Apr 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions apps/site/navigation.json
View file
Open in desktop
Copy link
Copy Markdown
Member

@mikeesto mikeesto Apr 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes to this file are unrelated to the PR, please revert

Original file line number Diff line number Diff line change
Expand Up @@ -84,11 +84,6 @@
"link": "https://discord.gg/nodejs",
"alt": "Discord"
},
{
Copy link
Copy Markdown

@cursor cursor Bot Apr 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unrelated Mastodon link removal bundled in CSS-only PR

Medium Severity

The Mastodon social link entry was removed from the socialLinks array in navigation.json, but the PR description states the change "only affects .navigation child of sidebar component" and characterizes it as a "CSS diff." This removal is user-visible — the Mastodon icon will disappear from the site footer rendered by withFooter.tsx — and appears to be an unrelated change accidentally included in this PR.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 9d673ae. Configure here.

"icon": "mastodon",
"link": "https://social.lfx.dev/@nodejs",
"alt": "Mastodon"
},
{
"icon": "bluesky",
"link": "https://bsky.app/profile/nodejs.org",
Expand Down Expand Up @@ -170,4 +165,4 @@
}
}
}
}
}
9 changes: 6 additions & 3 deletions packages/ui-components/src/Containers/Sidebar/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,13 @@
dark:border-neutral-900
dark:bg-neutral-950;

.navigation {
@apply ml:flex
.navigation {
@apply ml:flex
flex-1
overflow-y-auto
scroll-smooth
Copy link

Copilot AI Apr 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

scroll-smooth forces smooth scrolling even when users prefer reduced motion. Consider using the motion-safe variant (e.g., motion-safe:scroll-smooth) so prefers-reduced-motion is respected (this pattern is already used elsewhere in the layout styles).

Suggested change
scroll-smooth
motion-safe:scroll-smooth

Copilot uses AI. Check for mistakes.
hidden;
Comment on lines +23 to 28
Copy link

Copilot AI Apr 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.navigation is applied to each SidebarGroup (one per group), so adding flex-1 + overflow-y-auto here will create multiple independently scrollable sections and may force groups to share the available height rather than size to content. If the goal is a single scrollable sidebar navigation, move the overflow/flex behavior to the sidebar container (or add a dedicated wrapper around all groups) instead of applying it per group.

Copilot uses AI. Check for mistakes.
}
}

.mobileSelect {
@apply ml:hidden
Expand Down
Loading