From 9a2a2e97fcdfca17589b84cb3c9e82c75a01893b Mon Sep 17 00:00:00 2001
From: fearganni <gannicus@orbitus.ca>
Date: Thu, 4 Apr 2024 13:07:00 -0400
Subject: [PATCH] Update RoleList.tsx (Fix role name extending out of the
 button)

Issue where the role name extends out of the button item.

- overflow: 'hidden', takes away the access characters from overlapping over the role permission section.

- title, shows the fill role name on hover of the item.

(tested text wrapping but doesn't look good at all, overflow hidden is much cleaner).
---
 src/components/pages/settings/permissions/RoleList.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/settings/permissions/RoleList.tsx b/src/components/pages/settings/permissions/RoleList.tsx
index 22dd0bf..84f95fa 100644
--- a/src/components/pages/settings/permissions/RoleList.tsx
+++ b/src/components/pages/settings/permissions/RoleList.tsx
@@ -85,8 +85,9 @@ export const RoleList = observer(
                         <ButtonItem
                             key={role.id}
                             selected={role.id === selected}
-                            style={{ color: role.colour! }}
-                            onClick={() => onSelect?.(role.id)}>
+                            style={{ overflow: 'hidden', color: role.colour! }}
+                            onClick={() => onSelect?.(role.id)}
+                            title={role.name}>
                             <Rank>{role_rank}</Rank>
                             {role.name}
                             {typeof rank === "number" && role_rank <= rank && (