diff --git a/frontend/src/components/ui/multi-select.tsx b/frontend/src/components/ui/multi-select.tsx
index fb3b6665..58a58cd3 100644
--- a/frontend/src/components/ui/multi-select.tsx
+++ b/frontend/src/components/ui/multi-select.tsx
@@ -70,12 +70,12 @@ export function MultiSelect({
           role="combobox"
           aria-expanded={open}
           className={cn(
-            'border-border bg-card hover:bg-accent w-full justify-between',
+            'border-border bg-card hover:bg-accent h-auto min-h-10 w-full justify-between py-1.5',
             !selected.length && 'text-gray-500 dark:text-gray-400',
             className,
           )}
         >
-          <div className="flex flex-wrap gap-1">
+          <div className="flex min-w-0 flex-wrap gap-1">
             {selected.length === 0 ? (
               placeholder
             ) : (
@@ -85,9 +85,9 @@ export function MultiSelect({
                   return (
                     <span
                       key={option?.value || label}
-                      className="dark:bg-primary/30 bg-primary/20 inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium text-purple-700 dark:text-purple-300"
+                      className="bg-primary/20 dark:bg-primary/30 inline-flex max-w-[calc(100%-1rem)] min-w-0 items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium text-purple-700 dark:text-purple-300"
                     >
-                      {label}
+                      <span className="truncate">{label}</span>
                       <span
                         role="button"
                         tabIndex={0}