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)

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={