fix: add scrollable wrapper inside sidebar content#62
Merged
Conversation
Add an inner div with custom-scrollbar and overflow-y-auto classes inside SidebarContent to enable vertical scrolling when notes overflow the sidebar. This works around a WebKit flex-col + overflow issue where SidebarContent's built-in overflow-auto did not produce scrollable behavior. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
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
1 participant
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
Add an inner wrapper div with
custom-scrollbarandoverflow-y-autoclasses insideSidebarContentto enable vertical scrolling when notes overflow the sidebar area.Problem
When many notes exist, the sidebar content overflows and is visually cut off, but users cannot scroll to see hidden notes. The root cause is a WebKit (Tauri WebView) compatibility issue where
SidebarContent's built-inflex-col+overflow-autocombination does not produce scrollable behavior.Solution
Instead of modifying the shadcn/ui
SidebarContentcomponent directly, wrap the sidebar body content in a plain<div>with:custom-scrollbar: VS Code-like thin scrollbar stylingmin-h-0 flex-1: proper flex child height constraintoverflow-y-auto overflow-x-hidden: vertical scroll enabled, horizontal hiddenThis separates the flex layout concern (handled by
SidebarContent) from the scroll concern (handled by the inner div), which is a well-known pattern for fixing flex-col + scroll issues in WebKit.Changes
src/features/sidebar/ui/NoteSidebar.tsx: Add scroll wrapper div insideSidebarContent