fix(dropdown): add scroll behavior for long lists

[mattrothenberg]

Summary

• Adds max-h-[var(--available-height)] to constrain dropdown popup to available viewport space
• Adds inner scroll container with overflow-y-auto and overscroll-contain to handle long lists
• Adds docs demo with max-height toggle buttons to exercise and verify scroll behavior

Pattern

Follows Base UI's Combobox scroll pattern:

<Popup max-h bg>          <!-- Frame: background stays fixed -->
  <div overflow-y-auto>   <!-- Scroll container -->
    {children}
  </div>
</Popup>

This ensures the background stays on the non-scrolling frame, preventing transparency during overscroll.

Testing

• Typecheck passes
• Lint passes
• Manual: Keyboard navigation (arrow keys) in long list
• Manual: Nested submenu still works
• Manual: Screen reader check

Note

Short dropdowns (< 3 items) may have subtle rubber-banding when attempting to scroll. This is a minor side effect of having a scroll container and is acceptable behavior.

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@352

commit: 9455b67

[github-actions]

Docs Preview

View docs preview

Commit: 05d40d2

[github-actions]

Visual Regression Report

15 screenshot(s) with visual changes:

Button / Basic

183 px (0.18%) changed

Before	After	Diff

Button / Variant: Primary

796 px (0.78%) changed

Before	After	Diff

Button / Variant: Ghost

164 px (0.16%) changed

Before	After	Diff

Button / Variant: Outline

82 px (0.08%) changed

Before	After	Diff

Button / Loading State

4 px (0%) changed

Before	After	Diff

Button / Title

272 px (0.27%) changed

Before	After	Diff

Dialog / Dialog Confirmation

1,308 px (1.29%) changed

Before	After	Diff

Dialog / Dialog With Select

130 px (0.13%) changed

Before	After	Diff

Dialog / Dialog With Combobox

225 px (0.22%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Basic

300 px (0.3%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select / Select Multiple

556 px (0.55%) changed

Before	After	Diff

Select / Select Complex

1,144 px (0.97%) changed

Before	After	Diff

Select (Open)

266 px (0%) changed

Before	After	Diff

16 screenshot(s) unchanged

• Button / Variant: Secondary
• Button / Variant: Destructive
• Button / Variant: Secondary Destructive
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Dialog / Dialog With Actions
• Dialog / Dialog Basic
• Dialog / Dialog Alert
• Dialog / Dialog With Dropdown
• Select / Select Without Label
• Select / Select With Field
• Select / Select Placeholder
• Select / Select With Tooltip
• Select / Select Custom Rendering

---

Generated by Kumo Visual Regression

[mattrothenberg]

...