From 5c1cd49aaabed003fc4b653089fa2986473b45dd Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 30 May 2024 10:03:21 +0200
Subject: [PATCH] fix: handle long owner names for projects (#7215)

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">
---
 .../ProjectCardFooter/ProjectCardFooter.tsx        |  8 ++++----
 .../NewProjectCard/ProjectOwners/ProjectOwners.tsx | 14 ++++++--------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/frontend/src/component/project/NewProjectCard/ProjectCardFooter/ProjectCardFooter.tsx b/frontend/src/component/project/NewProjectCard/ProjectCardFooter/ProjectCardFooter.tsx
index 705e2b8bc3..a6c05da6dc 100644
--- a/frontend/src/component/project/NewProjectCard/ProjectCardFooter/ProjectCardFooter.tsx
+++ b/frontend/src/component/project/NewProjectCard/ProjectCardFooter/ProjectCardFooter.tsx
@@ -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> = ({
diff --git a/frontend/src/component/project/NewProjectCard/ProjectOwners/ProjectOwners.tsx b/frontend/src/component/project/NewProjectCard/ProjectOwners/ProjectOwners.tsx
index 13c391401c..ad144b8b4b 100644
--- a/frontend/src/component/project/NewProjectCard/ProjectOwners/ProjectOwners.tsx
+++ b/frontend/src/component/project/NewProjectCard/ProjectOwners/ProjectOwners.tsx
@@ -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>
+        </>
     );
 };