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)
Unleash · Jan 9, 2024 · 72f84f0 · 72f84f0
1 parent 1333ea7
commit 72f84f0
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx b/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>