From abf4966a378a85c6306a28199a0a47cd50689b63 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 30 May 2024 12:01:17 +0200
Subject: [PATCH] fix: handle overflowing avatars in the new project card
 (#7217)

This change prevents the project owner avatars in the new project card
footer from overflowing by making the number of avatars to show
configurable.

It defaults to 9, the old hard-coded number of avatars shown, but can
be configured.

The reason it overflows here is probably that the extra button in the
project card footer (the favorite) makes the footer smaller than what
we have for the group card footer.

Before:

![image](https://github.com/Unleash/unleash/assets/17786332/972fe471-a78a-436a-a08d-18afefd2501e)

After:


![image](https://github.com/Unleash/unleash/assets/17786332/af569412-85e2-4b9b-97b8-12b91d372a70)
---
 .../GroupCard/GroupCardAvatars/NewGroupCardAvatars.tsx      | 6 ++++--
 .../project/NewProjectCard/ProjectOwners/ProjectOwners.tsx  | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/NewGroupCardAvatars.tsx b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/NewGroupCardAvatars.tsx
index e04f0e41b9..17f9c503a9 100644
--- a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/NewGroupCardAvatars.tsx
+++ b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/NewGroupCardAvatars.tsx
@@ -47,11 +47,13 @@ interface IGroupCardAvatarsProps {
         imageUrl?: string;
     }[];
     header?: ReactNode;
+    avatarLimit?: number;
 }
 
 export const GroupCardAvatars = ({
     users = [],
     header = null,
+    avatarLimit = 9,
 }: IGroupCardAvatarsProps) => {
     const shownUsers = useMemo(
         () =>
@@ -68,7 +70,7 @@ export const GroupCardAvatars = ({
                     }
                     return 0;
                 })
-                .slice(0, 9),
+                .slice(0, avatarLimit),
         [users],
     );
 
@@ -109,7 +111,7 @@ export const GroupCardAvatars = ({
                     />
                 ))}
                 <ConditionallyRender
-                    condition={users.length > 9}
+                    condition={users.length > avatarLimit}
                     show={
                         <StyledAvatar>
                             +{users.length - shownUsers.length}
diff --git a/frontend/src/component/project/NewProjectCard/ProjectOwners/ProjectOwners.tsx b/frontend/src/component/project/NewProjectCard/ProjectOwners/ProjectOwners.tsx
index 9da71e237c..7a4c40a50a 100644
--- a/frontend/src/component/project/NewProjectCard/ProjectOwners/ProjectOwners.tsx
+++ b/frontend/src/component/project/NewProjectCard/ProjectOwners/ProjectOwners.tsx
@@ -59,6 +59,7 @@ export const ProjectOwners: FC<IProjectOwnersProps> = ({ owners = [] }) => {
             <GroupCardAvatars
                 header={owners.length === 1 ? 'Owner' : 'Owners'}
                 users={users}
+                avatarLimit={8}
             />
             <ConditionallyRender
                 condition={owners.length === 1}