Fix horizontal scrollbar on security roles with long names

[Copilot]

The security roles component was showing horizontal scrollbars when role names were long, instead of allowing the text to wrap naturally. This was caused by overflow-x-auto classes and the truncate class that prevented proper text wrapping.

Problem

As shown in the original issue, long role names like "Fondsadministration" were being truncated with ellipsis and causing horizontal scrollbars to appear:

Solution

Made minimal changes to the SecurityRoles component:

1. Removed overflow-x-auto classes from both the main container and privilege icons container
2. Removed truncate class from the role name paragraph to allow text wrapping

- <div className="flex flex-col gap-2 w-full overflow-x-auto">
+ <div className="flex flex-col gap-2 w-full">

- <p className="font-bold text-base text-wrap truncate max-w-full sm:max-w-[180px] md:max-w-[240px]">
+ <p className="font-bold text-base text-wrap max-w-full sm:max-w-[180px] md:max-w-[240px]">

- <div className="flex flex-wrap sm:flex-nowrap gap-2 align-bottom overflow-x-auto">
+ <div className="flex flex-wrap sm:flex-nowrap gap-2 align-bottom">

Result

The component now allows long security role names to wrap naturally across multiple lines while maintaining responsive design across all screen sizes:

Desktop (1200px):

Tablet (800px):

Mobile (375px):

✅ No horizontal scrollbars appear regardless of role name length
✅ Text wraps naturally instead of being truncated
✅ Responsive design is maintained across all screen sizes
✅ Layout remains clean and organized

Fixes #36.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.