fix: multi select style

yjs · Aug 28, 2024 · 6daa227 · 6daa227
1 parent d696e44
commit 6daa227
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/components/ui/multi-select.tsx b/src/components/ui/multi-select.tsx
@@ -51,10 +51,15 @@ function MultiSelect({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className={`w-full min-w-32 justify-between ${selected.length > 1 ? "h-full" : "h-10"}`}
+          className={`w-32 justify-between ${selected.length > 1 ? "h-full" : "h-10"}`}
           onClick={() => setOpen(!open)}
         >
-          <p className="flex gap-1 overflow-hidden">{selected.join(", ")}</p>
+          <p className="flex gap-1 overflow-hidden">
+            {options
+              .filter((option) => selected.includes(option.value))
+              .map((option) => option.label)
+              .join(", ")}
+          </p>
           <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>