fix: sidebar tree scrolls when content overflows viewport - #19
Merged
Conversation
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
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
Dogfood-driven fix (see
docs/SHELLUI_DOGFOOD_FIXES.md). Any docs site with more than ~15 nav items had unreachable bottom entries — the sidebar tree grew past the viewport instead of scrolling.The bug
.sidebar-treehadflex: 1+overflow-y: autobut nomin-height: 0. Classic flex gotcha: flex items default tomin-height: auto(intrinsic content size), soflex: 1doesn't let them shrink below the tree's content — the tree just grew past its parent'sheight: calc(100vh - …)container instead of scrolling.Reproduced on:
The fix
One line in
src/ShellDocs.Components/Chrome/DocsSidebar.razor.css:All three sidebar variants route the nav tree through the same
.sidebar-treeflex child, so one property fixes all of them. The existing top/bottom fade mask (mask-image: linear-gradient) still applies to the scroll viewport.Test plan
dotnet build shelldocs.slnx— clean, 0 warnings, 0 errorsdotnet test shelldocs.slnx— 139 / 139 passing (CSS-only; no test surface)Files touched
src/ShellDocs.Components/Chrome/DocsSidebar.razor.css—min-height: 0on.sidebar-tree(+ one-line comment)docs/SHELLUI_DOGFOOD_FIXES.md— entry moved from Open to Fixed