From befcd92660242b4c05aeac119e4ff25fc631fe99 Mon Sep 17 00:00:00 2001
From: manojava-gk <ibm.g_koushik@mercedes-benz.com>
Date: Mon, 21 Oct 2024 15:50:44 +0530
Subject: [PATCH] fix(user management): user table - allow user to scroll
 horizontally in roles column to view all the added information

---
 CHANGELOG.md                                  |  2 +
 .../shared/frame/UserList/index.tsx           | 38 +++++++++++--------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3edbe6366..fed719784 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,8 @@
 
 - **App Subscription Management**
   - fixed 'read more' link by adding link [#1200](https://github.com/eclipse-tractusx/portal-frontend/pull/1200)
+- **User Management**
+  - user table - allow user to scroll horizontally in roles column to view all the added information
 
 ### Feature
 
diff --git a/src/components/shared/frame/UserList/index.tsx b/src/components/shared/frame/UserList/index.tsx
index c56248041..7d974c1b8 100644
--- a/src/components/shared/frame/UserList/index.tsx
+++ b/src/components/shared/frame/UserList/index.tsx
@@ -130,7 +130,7 @@ export const UserList = ({
           {
             field: 'name',
             headerName: t('global.field.name'),
-            flex: 3,
+            flex: 2,
             valueGetter: ({ row }: { row: TenantUser }) =>
               `${row.firstName} ${row.lastName}`,
           },
@@ -138,7 +138,7 @@ export const UserList = ({
           {
             field: 'status',
             headerName: t('global.field.status'),
-            flex: 3,
+            flex: 1.5,
             renderCell: ({ value: status }) => {
               return (
                 <StatusTag color="label" label={t(`global.field.${status}`)} />
@@ -148,25 +148,33 @@ export const UserList = ({
           {
             field: 'roles',
             headerName: t('global.field.role'),
-            flex: 4,
-            renderCell: ({ value: roles }) =>
-              roles.length
-                ? roles.map((role: RoleType | string) => (
-                    <StatusTag
-                      key={typeof role === 'string' ? role : role.roleId}
-                      color="label"
-                      label={typeof role === 'string' ? role : role.roleName}
-                      className="statusTag"
-                    />
-                  ))
-                : '',
+            flex: 5,
+            renderCell: ({ value: roles }) => (
+              <span
+                style={{
+                  overflowX: 'scroll',
+                  scrollbarWidth: 'none',
+                }}
+              >
+                {roles.length
+                  ? roles.map((role: RoleType | string) => (
+                      <StatusTag
+                        key={typeof role === 'string' ? role : role.roleId}
+                        color="label"
+                        label={typeof role === 'string' ? role : role.roleName}
+                        className="statusTag"
+                      />
+                    ))
+                  : ''}
+              </span>
+            ),
           },
           {
             field: 'details',
             headerName: isDetail
               ? t('global.field.details')
               : t('global.field.edit'),
-            flex: 2,
+            flex: 1.5,
             renderCell: ({ row }: { row: TenantUser }) => (
               <IconButton
                 disabled={onDetailsClick === undefined}