From 29405b66b1a79190f29aebad12fe517e05dd2f12 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 8 Jul 2025 07:42:13 +0000
Subject: [PATCH 1/2] Initial plan


From 1014fb4d5c0a3550e96b4bd35490bf78b60f2974 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 8 Jul 2025 07:49:09 +0000
Subject: [PATCH 2/2] Fix scrollbar issue: Remove overflow-x-auto and truncate
 classes

Co-authored-by: magesoe <8904582+magesoe@users.noreply.github.com>
---
 Website/components/entity/SecurityRoles.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Website/components/entity/SecurityRoles.tsx b/Website/components/entity/SecurityRoles.tsx
index af61b65..df1fc7f 100644
--- a/Website/components/entity/SecurityRoles.tsx
+++ b/Website/components/entity/SecurityRoles.tsx
@@ -6,7 +6,7 @@ import { HybridTooltip, HybridTooltipContent, HybridTooltipTrigger } from "../ui
 
 export function SecurityRoles({ roles }: { roles: SecurityRole[] }) {
     return (
-        <div className="flex flex-col gap-2 w-full overflow-x-auto">
+        <div className="flex flex-col gap-2 w-full">
             {roles.map(role => (
                 <SecurityRoleRow key={role.Name} role={role} />
             ))}
@@ -17,8 +17,8 @@ export function SecurityRoles({ roles }: { roles: SecurityRole[] }) {
 function SecurityRoleRow({ role }: { role: SecurityRole }) {
     return (
         <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 bg-gray-50 rounded-lg p-4 border border-gray-100 w-full min-w-[320px]">
-            <p className="font-bold text-base text-wrap truncate max-w-full sm:max-w-[180px] md:max-w-[240px]">{role.Name}</p>
-            <div className="flex flex-wrap sm:flex-nowrap gap-2 align-bottom overflow-x-auto">
+            <p className="font-bold text-base text-wrap max-w-full sm:max-w-[180px] md:max-w-[240px]">{role.Name}</p>
+            <div className="flex flex-wrap sm:flex-nowrap gap-2 align-bottom">
                 <PrivilegeIcon name="Create" depth={role.Create} />
                 <PrivilegeIcon name="Read" depth={role.Read} />
                 <PrivilegeIcon name="Write" depth={role.Write} />