Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

fix: handle long owner names for projects (#7215)

Browse Source 
This change updates the new project card footer to better handle long
names. Previously, if a name was too long to fit on a single line,
it'd wrap. It didn't cause any layout shift, but it made the card look
off.

So instead of wrapping, we now truncate the name and add an ellipsis.

To achieve this, I changed the layout to grid instead of flexbox and
removed a nested flex container.

Before: 


![image](https://github.com/Unleash/unleash/assets/17786332/2074ac85-ce73-4292-beed-a3da05083a8d)

After:


![image](https://github.com/Unleash/unleash/assets/17786332/8302aae8-959f-4336-acd3-dbc207767d5a)

Other cards remain the same, as shown here (new code on left, old code
on right):


<img width="601" alt="image"
src="https://github.com/Unleash/unleash/assets/17786332/009c5d5d-3f9d-4640-86a1-3b6afcd04041">
This commit is contained in:
Thomas Heartman 2024-05-30 10:03:21 +02:00 committed by GitHub
parent 50c725e2a9
commit 5c1cd49aaa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/component/project/NewProjectCard/ProjectCardFooter/ProjectCardFooter.tsx
View File

@ -11,17 +11,17 @@ interface IProjectCardFooterProps {
}
const StyledFooter = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
display: 'grid',
gridTemplateColumns: 'auto 1fr auto',
alignItems: 'center',
padding: theme.spacing(1.5, 3),
padding: theme.spacing(1.5, 3, 2.5, 3),
background: theme.palette.envAccordion.expanded,
boxShadow: theme.boxShadows.accordionFooter,
}));
const StyledFavoriteIconButton = styled(FavoriteIconButton)(({ theme }) => ({
marginRight: theme.spacing(-1),
marginLeft: 'auto',
marginBottom: theme.spacing(-1),
}));
export const ProjectCardFooter: FC<IProjectCardFooterProps> = ({

14
frontend/src/component/project/NewProjectCard/ProjectOwners/ProjectOwners.tsx
View File

@ -41,15 +41,13 @@ const useOwnersMap = () => {
};
};
const StyledContainer = styled('div')(({ theme }) => ({
marginBottom: theme.spacing(1),
display: 'flex',
alignItems: 'flex-end',
}));
const StyledUserName = styled('p')(({ theme }) => ({
fontSize: theme.typography.body1.fontSize,
margin: theme.spacing(0, 0, 0.5, 0),
overflowX: 'hidden',
textOverflow: 'ellipsis',
textWrap: 'nowrap',
alignSelf: 'end',
}));
export const ProjectOwners: FC<IProjectOwnersProps> = ({ owners = [] }) => {
@ -57,7 +55,7 @@ export const ProjectOwners: FC<IProjectOwnersProps> = ({ owners = [] }) => {
const users = owners.map(ownersMap);
return (
<StyledContainer>
<>
<GroupCardAvatars
header={owners.length === 1 ? 'Owner' : 'Owners'}
users={users}
@ -70,6 +68,6 @@ export const ProjectOwners: FC<IProjectOwnersProps> = ({ owners = [] }) => {
</StyledUserName>
}
/>
</StyledContainer>
</>
);
};