Skip to content

feat(core): fold group side nav overflow into a height-based show-more#467

Merged
antfu merged 1 commit into
mainfrom
feat/group-sidenav-overflow
Jul 23, 2026
Merged

feat(core): fold group side nav overflow into a height-based show-more#467
antfu merged 1 commit into
mainfrom
feat/group-sidenav-overflow

Conversation

@antfubot

Copy link
Copy Markdown
Collaborator

Description

When a group has more members than the panel is tall enough to show, the group side nav (DockGroupSidebar) previously just scrolled. This folds the members that don't fit into a bottom "show more" button that opens them in a flyout, driven by the rail's measured frame height — so the rail never scrolls.

  • Height-based capacity. The rail root is measured with useElementBounding (mirroring DockPanel). A new pure deriveSidebarCapacity helper turns the available height into an integer capacity, then feeds the existing docksSplitGroupsWithCapacity split. It reserves the show-more button's slot only once overflow is unavoidable (two-pass), and budgets for sub-category dividers so a multi-sub-category group never clips.
  • Reused components. The flyout reuses DockGroupPopover (passed only the overflowed members), opened through a dedicated docksSidebarOverflowPanel floating slot (placement right) so it stays independent of the dock bar's group/overflow popovers. The trigger matches the dock bar's DockOverflowButton — the same dots icon and a 9+-capped count badge.
  • Hidden selection stays visible. When the active tool is one of the hidden members, the show-more button lights up (also while the flyout is open), so a hidden selection remains discoverable.
  • The rail switches from of-y-auto to of-y-hidden; all three hosts (DockPanel, DockStandalone, DockEdge) inherit the behavior.

Linked Issues

Additional context

  • Unit tests cover the capacity derivation and the overflow split (dock-sidebar-capacity.test.ts).
  • An Overflow Storybook story on a constrained-height shell demonstrates the folded rail with a highlighted show-more button.
  • pnpm lint, pnpm test, pnpm typecheck, and pnpm build all pass. The .generated/css.ts change is the UnoCSS artifact regenerated from the new template classes.

This PR was created with the help of an agent.

When a group has more members than the panel is tall enough to show, the
group side nav previously scrolled. Instead, measure the rail's frame height
and fold the members that don't fit into a bottom "show more" button that
opens the members in a flyout, so the rail never scrolls.

The show-more button carries a hidden-member count and lights up when the
active tool is one of the hidden members, so a hidden selection stays
discoverable.
@antfu
antfu merged commit 081279a into main Jul 23, 2026
2 checks passed
@antfu
antfu deleted the feat/group-sidenav-overflow branch July 23, 2026 08:32
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.

2 participants