fix(ui): cmdk wheel-scroll on macOS + match dropdown widths to trigger

Radix Popover swallowed wheel events on cmdk-backed comboboxes for
macOS users — the country / timezone dropdowns were unscrollable with
a Magic Mouse / trackpad. Add an `onWheel` translator on `CommandList`
plus `overscroll-contain` so the list captures the delta directly.
Lights up every cmdk popover (Companies, Residential Clients, Clients,
Yachts, settings).

Country and Timezone comboboxes now constrain popover content to
`w-[var(--radix-popper-anchor-width)]` with sensible `min-w-*` floors
so wide triggers get correspondingly wide popovers.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-09 04:10:35 +02:00
parent e13232e2ad
commit 3c47f6b7f9
3 changed files with 19 additions and 4 deletions

View File

@@ -57,10 +57,19 @@ CommandInput.displayName = CommandPrimitive.Input.displayName
const CommandList = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.List>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
>(({ className, onWheel, ...props }, ref) => (
// Inside a Radix Popover, native wheel scrolling is intercepted by the
// focus-scope and never reaches the cmdk list — so trackpad/mousewheel
// scrolling on the country dropdown silently no-ops. Translate the wheel
// event ourselves so the list scrolls regardless of focus state.
<CommandPrimitive.List
ref={ref}
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden overscroll-contain", className)}
onWheel={(event) => {
onWheel?.(event)
if (event.defaultPrevented) return
event.currentTarget.scrollTop += event.deltaY
}}
{...props}
/>
))