From 2554a16a1ddaa106250f5f2216a1cf03bbc2a2fc Mon Sep 17 00:00:00 2001
From: Teknium <127238744+teknium1@users.noreply.github.com>
Date: Wed, 9 Sep 2026 16:48:52 -0700
Subject: [PATCH] fix(desktop/settings): let searchable-select popovers size to
 content, not the shrink-wrapped trigger
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Timezone field (and the voice/model ComboboxInput) pinned the popover to
--radix-popover-trigger-width. In the settings grid the trigger shrink-wraps to
its current value (~90-120px), so every IANA row was clipped to "Africa/A…" and
the picker was unusable by eye even though selection itself worked. Use min-w so
the list keeps its own width and only grows to cover a wider trigger.

Live-verified on a sandboxed Electron instance over CDP: popover 123px -> 288px,
rows no longer overflow; click, type+Enter and autosave to config.yaml all land.
---
 apps/desktop/src/app/settings/combobox-input.tsx |  2 +-
 .../src/app/settings/searchable-select.test.tsx  | 16 ++++++++++++++++
 .../src/app/settings/searchable-select.tsx       |  6 +++++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/src/app/settings/combobox-input.tsx b/apps/desktop/src/app/settings/combobox-input.tsx
index 63dd426068..b092bdade5 100644
--- a/apps/desktop/src/app/settings/combobox-input.tsx
+++ b/apps/desktop/src/app/settings/combobox-input.tsx
@@ -81,7 +81,7 @@ export function ComboboxInput({
       </PopoverAnchor>
       <PopoverContent
         align="start"
-        className="w-[var(--radix-popover-trigger-width)] p-0"
+        className="min-w-(--radix-popover-trigger-width) p-0"
         onOpenAutoFocus={e => e.preventDefault()}
       >
         <Command shouldFilter={false}>
diff --git a/apps/desktop/src/app/settings/searchable-select.test.tsx b/apps/desktop/src/app/settings/searchable-select.test.tsx
index 61f0d77ffa..bf4b363cff 100644
--- a/apps/desktop/src/app/settings/searchable-select.test.tsx
+++ b/apps/desktop/src/app/settings/searchable-select.test.tsx
@@ -83,6 +83,22 @@ describe('SearchableSelect', () => {
     expect(screen.queryByText('System default')).toBeNull()
   })
 
+  it('lets the option list size to its content instead of the shrink-wrapped trigger', () => {
+    // The trigger shrink-wraps to its current value inside the settings grid
+    // (~120px for "Europe/Berlin"); pinning the popover width to it clipped
+    // every IANA row after "Africa/A…". The popover may grow to cover a wider
+    // trigger, but must never be capped at the trigger's width.
+    render(<SearchableSelect onChange={vi.fn()} options={options} value="Europe/Berlin" />)
+
+    fireEvent.click(screen.getByRole('combobox'))
+
+    const content = screen.getByRole('listbox', { hidden: true }).closest('[data-slot="popover-content"]')
+    const classes = content?.className.split(/\s+/) ?? []
+
+    expect(classes.some(c => c.startsWith('min-w-') && c.includes('radix-popover-trigger-width'))).toBe(true)
+    expect(classes.some(c => /^w-[[(].*radix-popover-trigger-width/.test(c))).toBe(false)
+  })
+
   it('shows the placeholder when the value is blank', () => {
     render(<SearchableSelect onChange={vi.fn()} options={options} placeholder="Search…" value="" />)
 
diff --git a/apps/desktop/src/app/settings/searchable-select.tsx b/apps/desktop/src/app/settings/searchable-select.tsx
index 8f679b48ba..b557bb000a 100644
--- a/apps/desktop/src/app/settings/searchable-select.tsx
+++ b/apps/desktop/src/app/settings/searchable-select.tsx
@@ -88,7 +88,11 @@ export function SearchableSelect({
           <Codicon className="shrink-0 opacity-60" name={open ? 'chevron-up' : 'chevron-down'} size="1rem" />
         </button>
       </PopoverTrigger>
-      <PopoverContent align="start" className="w-[var(--radix-popover-trigger-width)] p-0">
+      {/* min-w, not w: the trigger shrink-wraps to its current value inside the
+          settings grid, so a width pinned to it clipped every IANA row after
+          "Africa/A…". The popover keeps its own width and only grows to cover a
+          trigger wider than that. */}
+      <PopoverContent align="start" className="min-w-(--radix-popover-trigger-width) p-0">
         <Command filter={rankSearchOption}>
           <CommandInput autoFocus placeholder={placeholder} />
           <CommandList>