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({ e.preventDefault()} > 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() + + 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() 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({ - + {/* 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. */} +