From 6daa22735bb0c795a762538e738096e6470033e3 Mon Sep 17 00:00:00 2001
From: lawvs <18554747+lawvs@users.noreply.github.com>
Date: Wed, 28 Aug 2024 20:24:06 +0800
Subject: [PATCH] fix: multi select style

---
 src/components/ui/multi-select.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/multi-select.tsx b/src/components/ui/multi-select.tsx
index 801eb64..6efe60e 100644
--- 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>