feat: overflow email when it's too long (#5801)

## About the changes
For long emails we want to 
![Screenshot from 2024-01-09
10-29-42](https://github.com/Unleash/unleash/assets/455064/85305c41-25c3-4c54-8159-f9ce32adeb6c)


![image](https://github.com/Unleash/unleash/assets/455064/b1728aa0-eb93-44d9-ab65-e41d3fae0d2b)

frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx

@@ -38,6 +38,10 @@ const StyledUserAvatar = styled(UserAvatar)(({ theme }) => ({
 
 const StyledSubtitle = styled(Typography)(({ theme }) => ({
     color: theme.palette.text.secondary,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    maxWidth: theme.spacing(35),
 }));
 
 const StyledLink = styled(Link<typeof RouterLink | 'a'>)(({ theme }) => ({
@@ -94,7 +98,7 @@ export const UserProfileContent = ({
                         <Typography>
                             {profile.name || profile.username}
                         </Typography>
-                        <StyledSubtitle variant='body2'>
+                        <StyledSubtitle variant='body2' title={profile.email}>
                             {profile.email}
                         </StyledSubtitle>
                     </div>