Skip to content

fix(Dropdown): keep items at full height when the menu scrolls - #1256

Open
ariser wants to merge 1 commit into
mainfrom
nick/dropdown-item-no-shrink
Open

ariser wants to merge 1 commit into
mainfrom
nick/dropdown-item-no-shrink

Conversation

@ariser

@ariser ariser commented Oct 7, 2026 •

Copy link
Copy Markdown
Collaborator

Description

  • Dropdown.Item now has flex-shrink: 0, so it keeps its full height when the menu is taller than the space available. The menu scrolls instead.
  • Cause: the content panel is a flex column (display: flex from GenericMenuPanel, flex-direction: column from .dropdown-menu-content) with max-height: var(--radix-dropdown-menu-content-available-height) and overflow-y: auto. The items kept the default flex-shrink: 1, so items taller than one line (for example with a description) shrank toward their 32px min-height before the panel started to scroll.

Links and tickets

CUI-324. History: #535 (for #533, long lists) added min-height: 32px to Dropdown.Item "to make sure it does not get compressed". That was the same shrinking: the minimum only stops the items at 32px. This PR removes the cause.

Good to know

  • Select does not have this problem: its options sit inside a block element with overflow: auto, and that element is the flex item, so the options are not flex items. Wrapping the Dropdown items in the same way was an alternative; this PR uses the smaller change.
  • Items that fit the menu look the same as before. The change is visible only when the menu has to scroll.
Tests

No unit test: this is layout, and jsdom does no layout. No new visual test case was added.

Checklist

  • Breaking changes? (add migration notes in changesets)
  • Visual changes? (specify in changesets)
  • Design review needed?

Contribution

  • Sufficient research before PR
  • Self-reviewed the PR
  • Manually tested the changes (when applies - visual confirmation in Storybook)
  • build and build-storybook work locally
  • Tests and Stories are aligned with the changes

Accessibility

Skipped: no markup, behavior or ARIA changed. One layout declaration was added.

Screenshots

TODO: before/after of a scrolling menu with multi-line items.

🤖 Generated with Claude Code

The content panel is a flex column with a max height, and its items kept
the default flex-shrink, so items taller than the 32px minimum shrank
before the panel started to scroll.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@ariser
ariser force-pushed the nick/dropdown-item-no-shrink branch from b31e74c to 15334da Compare October 7, 2026 18:03
@changeset-bot

changeset-bot Bot commented Oct 7, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 15334da

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@clickhouse/click-ui Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@ariser
ariser marked this pull request as ready for review October 7, 2026 18:05
@ariser
ariser requested review from DreaminDani and XOP October 7, 2026 18:05
@workflow-authentication-public

Copy link
Copy Markdown
Contributor

Storybook Preview Deployed

✅ Preview URL: https://click-qjnfvxp6l-clickhouse.vercel.app

Built from commit: fd481bc2265baafa5c1539a5c1d4ef05994fc867

@workflow-authentication-public

Copy link
Copy Markdown
Contributor

Chromatic Storybook

Check Status Link
Storybook ✅ 642 stories published Open Storybook
UI Tests ✅ 642 tests unchanged Open build

Built from commit: 15334da01144c796e0c98fd3a935a5e6e3ae54cc · Chromatic run

Statuses as of the end of the run. The build link shows the live review state.

This branch has not been deployed

No deployments
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