Skip to content

fix: sidebar tree scrolls when content overflows viewport - #19

Merged
Shewart merged 1 commit into
mainfrom
fix/sidebar-overflow-scroll
Jul 24, 2026
Merged

fix: sidebar tree scrolls when content overflows viewport#19
Shewart merged 1 commit into
mainfrom
fix/sidebar-overflow-scroll

Conversation

@Shewart

@Shewart Shewart commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

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-tree had flex: 1 + overflow-y: auto but no min-height: 0. Classic flex gotcha: flex items default to min-height: auto (intrinsic content size), so flex: 1 doesn't let them shrink below the tree's content — the tree just grew past its parent's height: calc(100vh - …) container instead of scrolling.

Reproduced on:

  • Desktop TopNav variant
  • Desktop Sidebar (floating card) variant
  • Mobile drawer

The fix

One line in src/ShellDocs.Components/Chrome/DocsSidebar.razor.css:

.sidebar-tree {
    flex: 1;
    min-height: 0;   /* NEW — lets flex shrink so overflow-y kicks in */
    …
}

All three sidebar variants route the nav tree through the same .sidebar-tree flex 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 errors
  • dotnet test shelldocs.slnx139 / 139 passing (CSS-only; no test surface)
  • Manual: any docs site with a long nav — sidebar scrolls internally, bottom items reachable, fade mask still visible on the scroll edges

Files touched

  • src/ShellDocs.Components/Chrome/DocsSidebar.razor.cssmin-height: 0 on .sidebar-tree (+ one-line comment)
  • docs/SHELLUI_DOGFOOD_FIXES.md — entry moved from Open to Fixed

@Shewart
Shewart merged commit 5537370 into main Jul 24, 2026
1 check passed
@Shewart
Shewart deleted the fix/sidebar-overflow-scroll branch July 25, 2026 00:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant