From 882865ffed4da9519b771dcca48f74cdb069de94 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Fri, 14 Mar 2025 09:35:32 -0700
Subject: [PATCH] fix the overflow in credential items (#1937)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>
---
 .../routes/workflows/components/CredentialSelector.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/components/CredentialSelector.tsx b/skyvern-frontend/src/routes/workflows/components/CredentialSelector.tsx
index 76c1af7d..e526466f 100644
--- a/skyvern-frontend/src/routes/workflows/components/CredentialSelector.tsx
+++ b/skyvern-frontend/src/routes/workflows/components/CredentialSelector.tsx
@@ -1,7 +1,9 @@
 import {
+  CustomSelectItem,
   Select,
   SelectContent,
   SelectItem,
+  SelectItemText,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
@@ -49,19 +51,21 @@ function CredentialSelector({ value, onChange }: Props) {
         </SelectTrigger>
         <SelectContent>
           {credentials.map((credential) => (
-            <SelectItem
+            <CustomSelectItem
               key={credential.credential_id}
               value={credential.credential_id}
             >
               <div className="space-y-2">
-                <p className="text-sm font-medium">{credential.name}</p>
+                <p className="text-sm font-medium">
+                  <SelectItemText>{credential.name}</SelectItemText>
+                </p>
                 <p className="text-xs text-slate-400">
                   {credential.credential_type === "password"
                     ? "Password"
                     : "Credit Card"}
                 </p>
               </div>
-            </SelectItem>
+            </CustomSelectItem>
           ))}
           <SelectItem value="new">
             <div className="flex items-center gap-2">