From 1ac447141af4ec286aba3e6f3b1f71581ebeb57b Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 30 May 2024 10:59:44 +0200
Subject: [PATCH] fix: handle long names in new project card footers (#7216)

This is a redo of #7215. I missed the case where you have multiple
owners, causing it to lay out weird in that case.

This version handles that by returning an empty div for the owners
instead to fill up that space.

![image](https://github.com/Unleash/unleash/assets/17786332/4d0944a8-988c-4507-a127-755bbda90921)


![image](https://github.com/Unleash/unleash/assets/17786332/14feee20-e1f7-4507-b53d-c70b7d2961dc)


There **are** edge cases where the owners wrap:

![image](https://github.com/Unleash/unleash/assets/17786332/159838e3-2ea1-4846-9d53-357b1377c8e0)


But that is also the case with the current implementation:

![image](https://github.com/Unleash/unleash/assets/17786332/3e3be245-5ca7-46d9-bb3f-a453c90b4b78)

And only happens at very specific breakpoints.
---
 .../ProjectCardFooter/ProjectCardFooter.tsx       |  8 ++++----
 .../ProjectOwners/ProjectOwners.tsx               | 15 +++++++--------
 2 files changed, 11 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..9da71e237c 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}
@@ -69,7 +67,8 @@ export const ProjectOwners: FC<IProjectOwnersProps> = ({ owners = [] }) => {
                         {users[0]?.name || users[0]?.description}
                     </StyledUserName>
                 }
+                elseShow={<div />}
             />
-        </StyledContainer>
+        </>
     );
 };