fix(dropdown): limit dropdown content height to available viewport space

[invisal]

This PR fixes an issue where dropdown content could exceed the available viewport height, causing content to be clipped and inaccessible. The dropdown now respects the viewport boundaries by limiting its maximum height to the available space.

Reviews

• bonk has reviewed the change
• automated review not possible because: small, self-contained UI change; requesting standard human review

Tests

• Tests included/updated

[invisal]

/bonk please review and approve

[mattrothenberg]

/bonk review and approve

[pkg-pr-new]

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

commit: f0408e6

[github-actions]

Docs Preview

View docs preview

Commit: f0408e6

[ask-bonk]

LGTM. Clean, minimal fix that follows the existing pattern used by Select, Combobox, and Autocomplete.

• max-h-[var(--available-height)] is provided by Base UI's Positioner — correct usage.
• Demo naming follows convention and is properly wired into the docs page.
• Changeset included.

One tiny non-blocking observation: DropdownMenuContent still lacks a displayName, but that's pre-existing and not introduced by this PR.

[ask-bonk]

The combination of overflow-hidden (line 120) and overflow-y-auto here results in overflow-x: hidden; overflow-y: auto, which correctly preserves rounded-corner clipping while enabling vertical scrolling. 👍

[mattrothenberg]

@invisal is this analysis correct?

[ask-bonk]

Approved #609 — fix(dropdown): limit dropdown content height to available viewport space.

Summary:

• Clean, minimal fix that follows the existing pattern already used by Select, Combobox, and Autocomplete for viewport-aware sizing via Base UI's Positioner.
• Demo (DropdownLongListDemo) and docs are correctly wired up.
• Changeset included for the library patch.
• No concerns; the overflow-hidden + overflow-y-auto interaction correctly preserves rounded-corner clipping while enabling vertical scrolling.

github run

[github-actions]

Visual Regression Report — 7 changed, 34 unchanged

7 screenshot(s) with visual changes:

Button / Icon Only

112 px (0.11%) changed

Before	After	Diff

Button / Loading State

42 px (0.04%) changed

Before	After	Diff

Dialog / Dialog With Combobox

383 px (0.38%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Sizes

2,860 px (1.54%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select (Open)

737 px (0%) changed

Before	After	Diff

34 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Variant: Secondary Destructive
• Button / Sizes
• Button / With Icon
• Button / Disabled State
• Button / Title
• Button / Link as Button
• Dialog / Dialog With Actions
• Dialog / Dialog Basic
• Dialog / Dialog Sizes
• Dialog / Dialog Alert
• Dialog / Dialog Confirmation
• Dialog / Custom Max Width
• Dialog / Dialog With Select
• Dialog / Dialog With Dropdown
• Select / Select Basic
• Select / Select Without Label
• Select / Select With Description
• Select / Select With Error
• Select / Select Placeholder
• Select / Select With Tooltip
• Select / Select Custom Rendering
• Select / Select Multiple
• Select / Select Complex
• Select / Select Disabled Options
• Select / Select Disabled Items
• Select / Select Grouped
• Select / Select Grouped With Disabled
• Select / Select Long List

---

Generated by Kumo Visual Regression