From 97322e7d1edbad1f073f1f181111bc42b8aacd17 Mon Sep 17 00:00:00 2001
From: hamir-suspect <ahasanbasic@semaphore.io>
Date: Mon, 6 Oct 2025 15:55:01 +0200
Subject: [PATCH] fix(front): fix overflowing service account role selection
 dropdown

---
 .../components/CreateServiceAccount.tsx               | 11 +++++++++--
 .../components/EditServiceAccount.tsx                 | 11 +++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/front/assets/js/service_accounts/components/CreateServiceAccount.tsx b/front/assets/js/service_accounts/components/CreateServiceAccount.tsx
index 976ecd72d..26b4d03ab 100644
--- a/front/assets/js/service_accounts/components/CreateServiceAccount.tsx
+++ b/front/assets/js/service_accounts/components/CreateServiceAccount.tsx
@@ -52,6 +52,8 @@ export const CreateServiceAccount = ({ isOpen, onClose, onCreated }: CreateServi
 
   const canSubmit = name.trim().length > 0 && selectedRoleId.length > 0 && !loading;
 
+  const selectedRole = config.roles.find((role) => role.id === selectedRoleId);
+
   return (
     <Modal isOpen={isOpen} close={handleClose} title="Create Service Account">
       {!token ? (
@@ -92,11 +94,16 @@ export const CreateServiceAccount = ({ isOpen, onClose, onCreated }: CreateServi
               >
                 <option value="">Select a role...</option>
                 {config.roles.map((role) => (
-                  <option key={role.id} value={role.id}>
-                    {role.name} - {role.description}
+                  <option key={role.id} value={role.id} title={`${role.name} - ${role.description}`}>
+                    {role.name}
                   </option>
                 ))}
               </select>
+              {selectedRole && (
+                <p className="mt2 mb0 f6 mid-gray">
+                  {selectedRole.description}
+                </p>
+              )}
             </div>
 
             {error && (
diff --git a/front/assets/js/service_accounts/components/EditServiceAccount.tsx b/front/assets/js/service_accounts/components/EditServiceAccount.tsx
index 8d70e412c..6ea89b2a5 100644
--- a/front/assets/js/service_accounts/components/EditServiceAccount.tsx
+++ b/front/assets/js/service_accounts/components/EditServiceAccount.tsx
@@ -69,6 +69,8 @@ export const EditServiceAccount = ({
 
   if (!serviceAccount) return null;
 
+  const selectedRole = config.roles.find((role) => role.id === selectedRoleId);
+
   return (
     <Modal isOpen={isOpen} close={handleClose} title="Edit Service Account">
       <form onSubmit={(e) => void handleSubmit(e)}>
@@ -109,11 +111,16 @@ export const EditServiceAccount = ({
             >
               <option value="">Select a role...</option>
               {config.roles.map((role) => (
-                <option key={role.id} value={role.id}>
-                  {role.name} - {role.description}
+                <option key={role.id} value={role.id} title={`${role.name} - ${role.description}`}>
+                  {role.name}
                 </option>
               ))}
             </select>
+            {selectedRole && (
+              <p className="mt2 mb0 f6 mid-gray">
+                {selectedRole.description}
+              </p>
+            )}
           </div>
 
           {error && (