fix(user management): user table - allow user to scroll horizontally …

…in roles column to view all the added information
eclipse-tractusx · Oct 21, 2024 · befcd92 · befcd92
1 parent 361aea0
commit befcd92
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git 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
@@ -130,15 +130,15 @@ export const UserList = ({
           {
             field: 'name',
             headerName: t('global.field.name'),
-            flex: 3,
+            flex: 2,
             valueGetter: ({ row }: { row: TenantUser }) =>
               `${row.firstName} ${row.lastName}`,
           },
           { field: 'email', headerName: t('global.field.email'), flex: 3 },
           {
             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}