fix(Dropdown): keep menus 8px from the viewport edges instead of 100px

[ariser]

Description

• Dropdown.Content passes collisionPadding={8} to Radix instead of 100 when responsivePositioning is on (the default). Menus now keep 8px from every viewport edge.
• A number pads all four sides. With 100:
  • a menu that opens near a side edge moved up to 100px inward, away from its trigger;
  • Radix subtracts the padding from --radix-dropdown-menu-content-available-height, which is the menu's max-height, so menus scrolled or flipped 100px before they reached the top or bottom edge.
• responsivePositioning={false} is unchanged: no padding, no collision avoidance.
• Sub-menus go through the same Dropdown.Content, so they change too. SplitButton, DateRangePicker and DateTimeRangePicker render Dropdown.Content and get the same margin.

Links and tickets

CUI-323. History: #535 (for #533) shortened the menu with max-height: calc(... - 100px); #571 replaced that with collisionPadding={100}, because, per #571, changing the size in CSS broke Popper's position calculations. The CSS version affected only the height; the prop also pads the left and right sides. Related: #1259 changes nearby lines in Dropdown.tsx; the PR merged second needs a small conflict resolution.

Good to know

• 8 is a starting value for design review. The usual range for this margin is about 8 to 16px. It is a named constant in Dropdown.tsx, because Radix takes a number, not a CSS token.
• Only Dropdown sets a collision padding. Popover, Select, Tooltip and DatePicker use Radix's default of 0. Aligning them is a separate follow-up.
• No new public prop.

Tests

No unit test. The effect is layout. jsdom has a 0×0 viewport, so Radix computes an available height of −2 × padding (−16px now, −200px before). A test on that number would fail on this change, but the number has no meaning in a browser.

Visual specs run, all pass with no snapshot change: Dropdown (27), SplitButton (15), daterangepicker (8), datetimerangepicker (10). None of them places a menu near a viewport edge, so they show that nothing else moved, not the new margin.

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. Only the menu's position and maximum height change.

Screenshots

TODO: before/after of a menu near the left edge, and of a long menu in a short window.

🤖 Generated with Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: c5eaf9a

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

[workflow-authentication-public]

Storybook Preview Deployed

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

Built from commit: c285f16cfd7bcce1460e9412d39ba0ed55beaf82

[workflow-authentication-public]

Chromatic Storybook

Check	Status	Link
Storybook	✅ 642 stories published	Open Storybook
UI Tests	⏳ 5 changes must be accepted as baselines	Open build

Built from commit: c5eaf9acb33b1455a237d063f987f016cf7c7536 · Chromatic run

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

[ariser]

Hey @danielclickh
requested your review because I think you were the one requesting collision padding for radix dropdowns some time ago. If you have any pushback for reducing it from 100 to 8 px, let me know

[DreaminDani]

Seems fine to me but happy to make this 16px if 8px feels too tight. Let's wait for @danielclickh to respond