Skip to content

fix: enable independent scrolling in sidebar navigation #8846

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

Open
7487 wants to merge 1 commit into
base: main
Choose a base branch
from
+11 −8
Open

fix: enable independent scrolling in sidebar navigation #8846

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
19 changes: 11 additions & 8 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
@@ -1,7 +1,7 @@
@reference "../../styles/index.css";

.wrapper {
@apply ml:max-w-xs
@apply ml:max-w-xs
ml:overflow-auto
ml:border-r
Comment on lines +4 to 6
Copy link

Copilot AI Apr 26, 2026

Choose a reason for hiding this comment

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

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.

Copilot uses AI. Check for mistakes.
scrollbar-thin
Expand All @@ -16,18 +16,21 @@
bg-white
px-4
pt-6
2xl:px-6
2xl:px-6
dark:border-neutral-900
dark:bg-neutral-950;

.navigation {
@apply ml:flex
.navigation {
@apply ml:flex
Copy link

Copilot AI Apr 26, 2026

Choose a reason for hiding this comment

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

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.

Suggested change
@apply ml:flex
@apply ml:flex
min-h-0

Copilot uses AI. Check for mistakes.
flex-1
overflow-y-auto
scroll-smooth
Copy link

Copilot AI Apr 26, 2026

Choose a reason for hiding this comment

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

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.

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

Copilot uses AI. Check for mistakes.
Comment on lines +25 to +27
Copy link

Copilot AI Apr 26, 2026

Choose a reason for hiding this comment

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

.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.

Copilot uses AI. Check for mistakes.
hidden;
}
}

.mobileSelect {
@apply ml:hidden
.mobileSelect {
@apply ml:hidden
flex
w-full;
}
}
}
Loading