From 0284daf2ba695c2eb365c84b7ad0eb01e19dc3ac Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 5 Aug 2024 10:33:10 +0200
Subject: [PATCH] fix: Avoid collaborators being smooshed together (#7741)

Fixes an issue where the collaborator component would be smooshed
together when you have too many collaborators and too many flag tab
items.

The primary things I have done are:
1. Limit the amount of collaborators we show to 6 instead of 8. I
believe the number 8 was arbitrary, so let's go with 6 for now.
2. Instead of using a fixed gap, use a separator element that grows up
to a certain limit. I've added a `Separator` component, which is an
empty div with flex-grow. It feels like you should be able to do that
with gap too, but I can't think of how right now.
3. Don't allow collaborator component text (or avatars) to wrap. We
don't have a lot of space in this header, so let's keep it tight.

Additionally, I've added the `className` prop to the AvatarGroup
component so that it can be styled externally. I also cleaned up some
naming that was left in while I was at it.

Before:

![image](https://github.com/user-attachments/assets/98525a23-c086-433a-8f60-3e281805409f)


After:

![image](https://github.com/user-attachments/assets/559f8975-9cbe-4260-ba5a-409a303375ed)
---
 .../common/AvatarGroup/AvatarGroup.tsx        | 12 ++++++-----
 .../feature/FeatureView/Collaborators.tsx     | 20 +++++++++++++++----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/common/AvatarGroup/AvatarGroup.tsx b/frontend/src/component/common/AvatarGroup/AvatarGroup.tsx
index 68c28564d1..ad7a85cc0e 100644
--- a/frontend/src/component/common/AvatarGroup/AvatarGroup.tsx
+++ b/frontend/src/component/common/AvatarGroup/AvatarGroup.tsx
@@ -32,6 +32,7 @@ type AvatarGroupProps = {
     users: User[];
     avatarLimit?: number;
     AvatarComponent?: typeof UserAvatar;
+    className?: string;
 };
 
 export const AvatarGroup = ({
@@ -40,18 +41,19 @@ export const AvatarGroup = ({
 }: AvatarGroupProps) => {
     const Avatar = StyledAvatar(AvatarComponent ?? UserAvatar);
 
-    return <GroupCardAvatarsInner AvatarComponent={Avatar} {...props} />;
+    return <AvatarGroupInner AvatarComponent={Avatar} {...props} />;
 };
 
-type GroupCardAvatarsInnerProps = Omit<AvatarGroupProps, 'AvatarComponent'> & {
+type AvatarGroupInnerProps = Omit<AvatarGroupProps, 'AvatarComponent'> & {
     AvatarComponent: typeof UserAvatar;
 };
 
-const GroupCardAvatarsInner = ({
+const AvatarGroupInner = ({
     users = [],
     avatarLimit = 9,
     AvatarComponent,
-}: GroupCardAvatarsInnerProps) => {
+    className,
+}: AvatarGroupInnerProps) => {
     const shownUsers = useMemo(
         () =>
             users
@@ -72,7 +74,7 @@ const GroupCardAvatarsInner = ({
     );
 
     return (
-        <StyledAvatars>
+        <StyledAvatars className={className}>
             {shownUsers.map((user) => (
                 <AvatarComponent key={objectId(user)} user={user} />
             ))}
diff --git a/frontend/src/component/feature/FeatureView/Collaborators.tsx b/frontend/src/component/feature/FeatureView/Collaborators.tsx
index 829eca8cea..a936cd55e3 100644
--- a/frontend/src/component/feature/FeatureView/Collaborators.tsx
+++ b/frontend/src/component/feature/FeatureView/Collaborators.tsx
@@ -16,6 +16,7 @@ const SectionContainer = styled('div')(({ theme }) => ({
     gap: theme.spacing(0.5),
     alignItems: 'flex-start',
     height: 'min-content',
+    whiteSpace: 'nowrap',
 }));
 
 const LastModifiedByAvatarAndLink = styled('div')(({ theme }) => ({
@@ -36,15 +37,19 @@ const LastModifiedBy: FC<Collaborator> = ({ id, name, imageUrl }) => {
     );
 };
 
+const StyledAvatarGroup = styled(AvatarGroup)({
+    flexWrap: 'nowrap',
+});
+
 const CollaboratorList: FC<{ collaborators: Collaborator[] }> = ({
     collaborators,
 }) => {
     return (
         <SectionContainer>
             <span className='description'>Collaborators</span>
-            <AvatarGroup
+            <StyledAvatarGroup
                 users={collaborators}
-                avatarLimit={8}
+                avatarLimit={6}
                 AvatarComponent={StyledAvatar}
             />
         </SectionContainer>
@@ -54,18 +59,24 @@ const CollaboratorList: FC<{ collaborators: Collaborator[] }> = ({
 const Container = styled('article')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'row',
-    gap: theme.spacing(10),
     alignItems: 'center',
-    justifyContent: 'space-between',
+    justifyContent: 'right',
     [theme.breakpoints.down('xl')]: {
         display: 'none',
     },
+    flex: 1,
 }));
 
 type Props = {
     collaborators: Collaborator[] | undefined;
 };
 
+const Separator = styled('div')(({ theme }) => ({
+    maxWidth: theme.spacing(10),
+    minWidth: theme.spacing(2),
+    flexGrow: 1,
+}));
+
 export const Collaborators: FC<Props> = ({ collaborators }) => {
     if (!collaborators || collaborators.length === 0) {
         return null;
@@ -76,6 +87,7 @@ export const Collaborators: FC<Props> = ({ collaborators }) => {
     return (
         <Container>
             <LastModifiedBy {...lastModifiedBy} />
+            <Separator />
             <CollaboratorList collaborators={collaborators} />
         </Container>
     );