fix: handle lots of project roles better (#8383)

This PR improves how we handle cases where you have lots of roles or roles with very long names.

It puts project roles into it's own little area (and turns it into a list!). We'll show three roles by default. If they all have super long names, we'll split them up onto multiple lines.

Additionally, the headers and avatar group will no longer wrap.

So in edge case territory, it'll look like this:
![image](https://github.com/user-attachments/assets/afb1a809-f6f4-4d25-9796-6abaa15445c1)

And what if one role has an even longer name? It'll wrap inside the badge:
![image](https://github.com/user-attachments/assets/f3b42cc5-2f5a-4447-9e5e-edef7f92f977)

frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx

@@ -1,7 +1,8 @@
-import { styled } from '@mui/material';
+import { Typography, styled } from '@mui/material';
 import { Badge } from 'component/common/Badge/Badge';
 import { AvatarGroupFromOwners } from 'component/common/AvatarGroupFromOwners/AvatarGroupFromOwners';
 import type { ProjectSchemaOwners } from 'openapi';
+import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 
 type Props = {
     roles: string[];
@@ -22,26 +23,97 @@ const InfoSection = styled('div')(({ theme }) => ({
     alignItems: 'center',
 }));
 
+const Roles = styled('ul')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+    flexFlow: 'row wrap',
+    listStyle: 'none',
+    padding: 0,
+}));
+
+const TooltipRoles = styled('ul')(({ theme }) => ({
+    gap: theme.spacing(1),
+    flexFlow: 'column',
+    display: 'flex',
+    listStyle: 'none',
+    padding: 0,
+}));
+
+const RoleBadge = styled(Badge)({
+    whitespace: 'nowrap',
+});
+
+const StyledAvatarGroup = styled(AvatarGroupFromOwners)({
+    width: 'max-content',
+});
+
 export const RoleAndOwnerInfo = ({ roles, owners }: Props) => {
+    const firstRoles = roles.slice(0, 3);
+    const extraRoles = roles.slice(3);
     return (
         <Wrapper>
             <InfoSection>
                 {roles.length > 0 ? (
                     <>
-                        <span>Your roles in this project:</span>
-                        {roles.map((role) => (
-                            <Badge key={role} color='secondary'>
-                                {role}
-                            </Badge>
-                        ))}
+                        <Typography
+                            sx={{
+                                whiteSpace: 'nowrap',
+                            }}
+                            variant='body1'
+                            component='h4'
+                        >
+                            Your roles in this project:
+                        </Typography>
+                        <Roles>
+                            {firstRoles.map((role) => (
+                                <li>
+                                    <RoleBadge key={role} color='secondary'>
+                                        {role}
+                                    </RoleBadge>
+                                </li>
+                            ))}
+                            {extraRoles.length ? (
+                                <li>
+                                    <HtmlTooltip
+                                        arrow
+                                        title={
+                                            <TooltipRoles>
+                                                {extraRoles.map((role) => (
+                                                    <li>
+                                                        <RoleBadge>
+                                                            {role}
+                                                        </RoleBadge>
+                                                    </li>
+                                                ))}
+                                            </TooltipRoles>
+                                        }
+                                    >
+                                        <RoleBadge
+                                            key={'extra-roles'}
+                                            color='secondary'
+                                        >
+                                            {`+ ${extraRoles.length} more`}
+                                        </RoleBadge>
+                                    </HtmlTooltip>
+                                </li>
+                            ) : null}
+                        </Roles>
                     </>
                 ) : (
                     <span>You have no project roles in this project.</span>
                 )}
             </InfoSection>
             <InfoSection>
-                <span>Project owner{owners.length > 1 ? 's' : ''}</span>
-                <AvatarGroupFromOwners users={owners} avatarLimit={3} />
+                <Typography
+                    variant='body1'
+                    component='h4'
+                    sx={{
+                        whiteSpace: 'nowrap',
+                    }}
+                >
+                    Project owner{owners.length > 1 ? 's' : ''}
+                </Typography>
+                <StyledAvatarGroup users={owners} avatarLimit={3} />
             </InfoSection>
         </Wrapper>
     );