From 5bbd7f97783889c3c57f318f9d67cb48acc6507d Mon Sep 17 00:00:00 2001
From: shahmargi12 <124675506+shahmargi12@users.noreply.github.com>
Date: Wed, 9 Oct 2024 17:38:11 +0530
Subject: [PATCH] fix(technical user table): prevent overlap between text and
 sort icon (#1160)

https://github.com/eclipse-tractusx/portal-frontend/issues/1158
---
 .../TechnicalUserTable.tsx                    | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/pages/TechnicalUserManagement/TechnicalUserTable.tsx b/src/components/pages/TechnicalUserManagement/TechnicalUserTable.tsx
index 9de920b41..30d4a08cd 100644
--- a/src/components/pages/TechnicalUserManagement/TechnicalUserTable.tsx
+++ b/src/components/pages/TechnicalUserManagement/TechnicalUserTable.tsx
@@ -102,6 +102,18 @@ export const TechnicalUserTable = () => {
         searchExpr={expr}
         hasBorder={false}
         rowHeight={80}
+        sx={{
+          '.MuiDataGrid-columnHeader, .MuiDataGrid-row .MuiDataGrid-cell[role="cell"]':
+            {
+              padding: '0 15px',
+              '&:first-child': {
+                paddingLeft: '32px',
+              },
+              '&:last-child': {
+                paddingRight: '25px',
+              },
+            },
+        }}
         defaultFilter={group}
         columnHeadersBackgroundColor={'transparent'}
         toolbarVariant={'searchAndFilter'}
@@ -127,12 +139,12 @@ export const TechnicalUserTable = () => {
           {
             field: 'clientId',
             headerName: t('global.field.clientId'),
-            flex: 1.1,
+            flex: 1.15,
           },
           {
             field: 'serviceAccountType',
             headerName: t('global.field.ownership'),
-            flex: 1.15,
+            flex: 1.2,
           },
           {
             field: 'usertype',
@@ -144,21 +156,21 @@ export const TechnicalUserTable = () => {
           {
             field: 'offer',
             headerName: t('global.field.offerLink'),
-            flex: 1.2,
+            flex: 1.25,
             valueGetter: ({ row }: { row: ServiceAccountListEntry }) =>
               row.offer ? row.offer?.name : '',
           },
           {
             field: 'isOwner',
             headerName: t('global.field.owner'),
-            flex: 0.9,
+            flex: 1,
             valueGetter: ({ row }: { row: ServiceAccountListEntry }) =>
               row.isOwner ? 'Yes' : 'No',
           },
           {
             field: 'status',
             headerName: t('global.field.status'),
-            flex: 1.25,
+            flex: 1,
             renderCell: ({ row }: { row: ServiceAccountListEntry }) => (
               <StatusTag
                 color={statusColorMap[row.status]}
@@ -171,7 +183,7 @@ export const TechnicalUserTable = () => {
           {
             field: 'details',
             headerName: t('global.field.details'),
-            flex: 0.9,
+            flex: 1.1,
             renderCell: ({ row }: { row: ServiceAccountListEntry }) => (
               <>
                 <IconButton