From 3c47f6b7f9db34836fa5683b3873574101fed4fc Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sat, 9 May 2026 04:10:35 +0200
Subject: [PATCH] fix(ui): cmdk wheel-scroll on macOS + match dropdown widths
 to trigger
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/components/shared/country-combobox.tsx  |  5 ++++-
 src/components/shared/timezone-combobox.tsx |  5 ++++-
 src/components/ui/command.tsx               | 13 +++++++++++--
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/shared/country-combobox.tsx b/src/components/shared/country-combobox.tsx
index 05372329..40105dcd 100644
--- a/src/components/shared/country-combobox.tsx
+++ b/src/components/shared/country-combobox.tsx
@@ -118,7 +118,10 @@ export function CountryCombobox({
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[280px] p-0" align="start">
+      <PopoverContent
+        className="w-[var(--radix-popper-anchor-width)] min-w-[280px] p-0"
+        align="start"
+      >
         <Command>
           <CommandInput placeholder="Search country or code…" />
           <CommandList>
diff --git a/src/components/shared/timezone-combobox.tsx b/src/components/shared/timezone-combobox.tsx
index 278fdc21..716418fc 100644
--- a/src/components/shared/timezone-combobox.tsx
+++ b/src/components/shared/timezone-combobox.tsx
@@ -92,7 +92,10 @@ export function TimezoneCombobox({
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[360px] p-0" align="start">
+      <PopoverContent
+        className="w-[var(--radix-popper-anchor-width)] min-w-[360px] p-0"
+        align="start"
+      >
         <Command>
           <CommandInput placeholder="Search timezones…" />
           <CommandList>
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 2cecd910..7529e12f 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -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}
   />
 ))