feat: add username to CR overview and list (#3498)

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx

@@ -45,6 +45,12 @@ export const ChangeRequestHeader: FC<{ changeRequest: IChangeRequest }> = ({
                         />
                     </Tooltip>
                 </Box>
+                <Typography
+                    variant="body2"
+                    sx={theme => ({ marginLeft: theme.spacing(0.5) })}
+                >
+                    {changeRequest?.createdBy?.username}
+                </Typography>
                 <Box sx={theme => ({ marginLeft: theme.spacing(1.5) })}>
                     <StyledCard variant="outlined">
                         <Typography variant="body2" sx={{ lineHeight: 1 }}>

frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/AvatarCell/AvatarCell.tsx

@@ -1,13 +1,27 @@
-import { UserAvatar } from '../../../../common/UserAvatar/UserAvatar';
-import { TextCell } from '../../../../common/Table/cells/TextCell/TextCell';
+import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
+import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
+import { styled, Typography } from '@mui/material';
+
+const StyledContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    margin: 0,
+}));
 
 export const AvatarCell = ({ value }: any) => {
     return (
         <TextCell>
-            <UserAvatar
-                user={value}
-                sx={{ maxWidth: '30px', maxHeight: '30px', alignSelf: 'left' }}
-            />
+            <StyledContainer>
+                <UserAvatar
+                    user={value}
+                    sx={theme => ({ marginRight: theme.spacing(0.5) })}
+                />
+                <Typography component={'span'} variant={'body2'}>
+                    {' '}
+                    {value?.username}
+                </Typography>
+            </StyledContainer>
         </TextCell>
     );
 };

frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx

@@ -108,7 +108,7 @@ export const ChangeRequestsTabs = ({
             {
                 Header: 'By',
                 accessor: 'createdBy',
-                maxWidth: 50,
+                maxWidth: 100,
                 canSort: false,
                 Cell: AvatarCell,
                 align: 'center',