diff --git a/.github/workflows/avoid-typos.yml b/.github/workflows/avoid-typos.yml
index 8d171f231b05d..e0a35fb9d2a7b 100644
--- a/.github/workflows/avoid-typos.yml
+++ b/.github/workflows/avoid-typos.yml
@@ -21,7 +21,7 @@ jobs:
         with:
           persist-credentials: false
       - name: misspell
-        uses: reviewdog/action-misspell@9daa94af4357dddb6fd3775de806bc0a8e98d3e4 # v1.26.3
+        uses: reviewdog/action-misspell@ba7ac4030fa6812f8c8b2d4e516af8bc99553c32 # v1.28.0
         with:
           github_token: ${{ secrets.github_token }}
           locale: 'US'
diff --git a/packages/ui-patterns/src/multi-select/multi-select.test.tsx b/packages/ui-patterns/src/multi-select/multi-select.test.tsx
index 5dfed06154b94..50d3ae3e5281c 100644
--- a/packages/ui-patterns/src/multi-select/multi-select.test.tsx
+++ b/packages/ui-patterns/src/multi-select/multi-select.test.tsx
@@ -50,12 +50,14 @@ function MultiSelectDemo() {
 describe('multi-select', () => {
   it('supports the tiny control size', () => {
     render(
-      <MultiSelector size="tiny" values={[]} onValuesChange={() => undefined}>
+      <MultiSelector size="tiny" values={['Apple']} onValuesChange={() => undefined}>
         <MultiSelectorTrigger label="Select fruits" />
       </MultiSelector>
     )
 
-    expect(screen.getByRole('combobox')).toHaveClass('h-[26px]', 'p-0.5')
+    const trigger = screen.getByRole('combobox')
+    expect(trigger).toHaveClass('h-[26px]', 'p-0.5')
+    expect(trigger.firstElementChild).toHaveClass('gap-0.5')
   })
 
   it('renders selected values with a custom label', () => {
diff --git a/packages/ui-patterns/src/multi-select/multi-select.tsx b/packages/ui-patterns/src/multi-select/multi-select.tsx
index d19adecb19170..2cc2a4c5970a1 100644
--- a/packages/ui-patterns/src/multi-select/multi-select.tsx
+++ b/packages/ui-patterns/src/multi-select/multi-select.tsx
@@ -229,14 +229,97 @@ export interface MultiSelectorTriggerProps extends React.HTMLAttributes<HTMLButt
   renderValue?: (value: string) => React.ReactNode
 }
 
+// The tiny control has no vertical padding to spare, so its children stretch to the
+// control height and drop their line-height; the larger sizes center normally.
 const MultiSelectorTriggerVariants = cva('', {
   variants: {
     size: {
-      tiny: 'h-[26px] p-0.5 text-xs',
-      small: 'min-h-[34px] px-3 py-1.5 text-sm',
-      medium: 'min-h-[38px] px-4 py-2 text-sm',
-      large: 'min-h-[42px] px-4 py-2 text-base',
-      xlarge: 'min-h-[50px] px-6 py-3 text-base',
+      tiny: 'h-[26px] p-0.5 text-xs items-stretch',
+      small: 'min-h-[34px] px-3 py-1.5 text-sm items-center',
+      medium: 'min-h-[38px] px-4 py-2 text-sm items-center',
+      large: 'min-h-[42px] px-4 py-2 text-base items-center',
+      xlarge: 'min-h-[50px] px-6 py-3 text-base items-center',
+    },
+  },
+  defaultVariants: {
+    size: SIZE_VARIANTS_DEFAULT,
+  },
+})
+
+const MultiSelectorBadgesVariants = cva('flex overflow-hidden flex-1 min-w-0', {
+  variants: {
+    size: {
+      tiny: 'h-full min-h-0 items-center gap-0.5',
+      small: 'gap-1 -ml-1',
+      medium: 'gap-1 -ml-1',
+      large: 'gap-1 -ml-1',
+      xlarge: 'gap-1 -ml-1',
+    },
+  },
+  defaultVariants: {
+    size: SIZE_VARIANTS_DEFAULT,
+  },
+})
+
+const MultiSelectorBadgeVariants = cva(
+  'rounded-sm shrink-0 px-1.5 bg-surface-75 dark:bg-white/5 normal-case tracking-normal text-xs',
+  {
+    variants: {
+      size: {
+        tiny: 'h-full py-0 leading-none',
+        small: '',
+        medium: '',
+        large: '',
+        xlarge: '',
+      },
+    },
+    defaultVariants: {
+      size: SIZE_VARIANTS_DEFAULT,
+    },
+  }
+)
+
+const MultiSelectorLabelVariants = cva(
+  'text-foreground-muted whitespace-nowrap opacity-0 transition-opacity hidden',
+  {
+    variants: {
+      size: {
+        tiny: 'leading-none',
+        small: 'ml-1 leading-5.5',
+        medium: 'ml-1 leading-5.5',
+        large: 'ml-1 leading-5.5',
+        xlarge: 'ml-1 leading-5.5',
+      },
+    },
+    defaultVariants: {
+      size: SIZE_VARIANTS_DEFAULT,
+    },
+  }
+)
+
+const MultiSelectorInlineInputWrapperVariants = cva('px-0 flex-1 border-none truncate min-w-0', {
+  variants: {
+    size: {
+      tiny: 'h-full',
+      small: '',
+      medium: '',
+      large: '',
+      xlarge: '',
+    },
+  },
+  defaultVariants: {
+    size: SIZE_VARIANTS_DEFAULT,
+  },
+})
+
+const MultiSelectorInlineInputVariants = cva('py-0 truncate', {
+  variants: {
+    size: {
+      tiny: 'px-0',
+      small: 'px-1',
+      medium: 'px-1',
+      large: 'px-1',
+      xlarge: 'px-1',
     },
   },
   defaultVariants: {
@@ -277,6 +360,7 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
     const IS_BADGE_LIMIT_WRAP = badgeLimit === 'wrap'
     const IS_NUMERIC_LIMIT = typeof badgeLimit === 'number'
     const IS_INLINE_MODE = mode === 'inline-combobox'
+    const HAS_TINY_PLACEHOLDER = size === 'tiny' && values.length === 0
 
     React.useEffect(() => {
       if (!inputRef?.current || !badgesRef.current) return
@@ -290,8 +374,7 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
       }
     }, [values, badgeLimit])
 
-    const badgeClasses =
-      'rounded-sm shrink-0 px-1.5 bg-surface-75 dark:bg-white/5 normal-case tracking-normal text-xs'
+    const badgeClasses = MultiSelectorBadgeVariants({ size })
 
     const handleTriggerClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(
       (event) => {
@@ -326,7 +409,7 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
           type="button"
           role="combobox"
           className={cn(
-            'flex w-full min-w-[200px] items-center justify-between rounded-md border',
+            'flex w-full min-w-[200px] justify-between rounded-md border',
             'border-strong',
             // Empty: raised plate. Filled: sunk well for chips.
             values.length > 0 ? 'bg-field' : 'bg-control-raised',
@@ -343,8 +426,7 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
           <div
             ref={badgesRef}
             className={cn(
-              'flex gap-1 overflow-hidden flex-1',
-              size !== 'tiny' && '-ml-1',
+              MultiSelectorBadgesVariants({ size }),
               IS_BADGE_LIMIT_WRAP && 'flex-wrap',
               !IS_BADGE_LIMIT_WRAP &&
                 'overflow-x-auto scrollbar-thin scrollbar-track-transparent transition-colors scrollbar-thumb-muted-foreground dark:scrollbar-thumb-muted scrollbar-thumb-rounded-lg'
@@ -378,7 +460,8 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
             )}
             <span
               className={cn(
-                'text-foreground-muted whitespace-nowrap leading-5.5 ml-1 opacity-0 transition-opacity hidden',
+                MultiSelectorLabelVariants({ size }),
+                HAS_TINY_PLACEHOLDER && 'ml-2',
                 !IS_INLINE_MODE &&
                   (persistLabel || values.length === 0) &&
                   'opacity-100 visible inline'
@@ -394,10 +477,13 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
                 placeholder={values.length === 0 ? label : undefined}
                 autoFocus={false}
                 wrapperClassName={cn(
-                  'px-0 flex-1 border-none truncate',
+                  MultiSelectorInlineInputWrapperVariants({ size }),
                   IS_BADGE_LIMIT_WRAP && 'min-w-[85px]'
                 )}
-                className="py-0 px-1 truncate"
+                className={cn(
+                  MultiSelectorInlineInputVariants({ size }),
+                  HAS_TINY_PLACEHOLDER && 'pl-2'
+                )}
               />
             )}
           </div>
@@ -406,7 +492,7 @@ const MultiSelectorTrigger = React.forwardRef<HTMLButtonElement, MultiSelectorTr
             <ChevronsUpDown
               size={16}
               strokeWidth={1.5}
-              className="text-foreground-lighter shrink-0 ml-1.5"
+              className="text-foreground-lighter shrink-0 ml-1.5 self-center"
             />
           )}
         </button>
@@ -494,7 +580,7 @@ const MultiSelectorInput = React.forwardRef<
       wrapperClassName={wrapperClassName}
       className={cn(
         MultiSelectorInputVariants({ size }),
-        'text-sm bg-transparent h-full grow border-none outline-hidden placeholder:text-foreground-muted flex-1',
+        'bg-transparent h-full grow border-none outline-hidden placeholder:text-foreground-muted flex-1',
         activeIndex !== -1 && 'caret-transparent',
         className
       )}