From cf3379d0b315cfbb64837dfc26cf4d362d1569e9 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 19 Aug 2024 14:58:46 +0200
Subject: [PATCH] fix: avoid awkward overlaps of group cards with lots of
 members, long project names, and small cards (#7915)

This PR updates the styling of the group cards to better handle edge
cases where you have a lot of assigned projects, long project names,
lots of members, etc.

In particular, it does the following things:
- aligns the avatars along the bottom of the card, so that even if
there's a lot of projects, the avatars stay close to the bottom edge
- adds word breaks for the project names, so that long names can break
when they need to
- adds some spacing between the two columns in the bottom row, so that
even when you they get close, they never quite touch.

Note: there is one more thing I'd like to address in a follow up: as
shown in the top row of the after image, there's some extra wrapping of
the first "This group has no users", even though it has the room to
grow. I'll keep looking into this and make a follow-up.

Before:

![image](https://github.com/user-attachments/assets/d612a1de-0aa7-4813-8e73-9345f449238d)

After:


![image](https://github.com/user-attachments/assets/a85308b3-dc42-4777-ab1e-4a89429507d2)
---
 .../admin/groups/GroupsList/GroupCard/GroupCard.tsx  | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
index 2c2ee17b21..0c1fd44656 100644
--- a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
+++ b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
@@ -41,8 +41,10 @@ const StyledTitleRow = styled(StyledRow)(() => ({
     alignItems: 'flex-start',
 }));
 
-const StyledBottomRow = styled(StyledRow)(() => ({
+const StyledBottomRow = styled(StyledRow)(({ theme }) => ({
     marginTop: 'auto',
+    alignItems: 'flex-end',
+    gap: theme.spacing(1),
 }));
 
 const StyledHeaderTitle = styled('h2')(({ theme }) => ({
@@ -85,6 +87,10 @@ const InfoBadgeDescription = styled('span')(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
 }));
 
+const ProjectNameBadge = styled(Badge)({
+    wordBreak: 'break-word',
+});
+
 interface IGroupCardProps {
     group: IGroup;
     onEditUsers: (group: IGroup) => void;
@@ -150,7 +156,7 @@ export const GroupCard = ({
                                         placement='bottom-end'
                                         describeChild
                                     >
-                                        <Badge
+                                        <ProjectNameBadge
                                             onClick={(e) => {
                                                 e.preventDefault();
                                                 navigate(
@@ -161,7 +167,7 @@ export const GroupCard = ({
                                             icon={<TopicOutlinedIcon />}
                                         >
                                             {project}
-                                        </Badge>
+                                        </ProjectNameBadge>
                                     </Tooltip>
                                 ))}
                                 elseShow={