fix: Fix iOS Safari auto-zoom on Combobox/MultiCombobox by using resp…

.changeset/combobox-text-size.md

@@ -0,0 +1,5 @@
+---
+'@baseplate-dev/ui-components': patch
+---
+
+Fix iOS Safari auto-zoom on Combobox/MultiCombobox by using responsive font size (text-base on mobile, text-sm on desktop)

packages/ui-components/src/components/ui/combobox-field/combobox-field.stories.tsx

@@ -10,6 +10,7 @@ const meta: Meta<typeof ComboboxField> = {
   tags: ['autodocs'],
   argTypes: {
     label: { control: { type: 'text' } },
+    placeholder: { control: { type: 'text' } },
     error: { control: { type: 'text' } },
     description: { control: { type: 'text' } },
     options: { control: 'object' },
@@ -46,6 +47,7 @@ export const Default: Story = {
       { label: 'Option 2', value: '2' },
       { label: 'Option 3', value: '3' },
     ],
+    placeholder: 'Select an option',
     getOptionLabel: (option) => (option as { label: string }).label,
     getOptionValue: (option) => (option as { value: string }).value,
     className: 'w-96',
@@ -60,6 +62,7 @@ export const Labelled: Story = {
       { label: 'Option 3', value: '3' },
     ],
     label: 'What option would you like to combobox?',
+    placeholder: 'Select an option',
     description: 'We will never judge you for your choice.',
     getOptionLabel: (option) => (option as { label: string }).label,
     getOptionValue: (option) => (option as { value: string }).value,

packages/ui-components/src/components/ui/combobox/combobox.tsx

@@ -265,7 +265,7 @@ function ComboboxChips({
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
       className={cn(
-        'flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40',
+        'flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-base transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 md:text-sm dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40',
         className,
       )}
       {...props}
@@ -311,7 +311,10 @@ function ComboboxChipsInput({
   return (
     <ComboboxPrimitive.Input
       data-slot="combobox-chip-input"
-      className={cn('min-w-16 flex-1 outline-none', className)}
+      className={cn(
+        'min-w-16 flex-1 text-base outline-none md:text-sm',
+        className,
+      )}
       {...props}
     />
   );