From eb0d1c7c139c211f3cfe72ebae47798c65713aa3 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <augustin.mauroy@outlook.fr>
Date: Thu, 21 Nov 2024 21:18:28 +0100
Subject: [PATCH 1/2] feat(AvatarGroupe): update overflow

---
 .../components/Common/AvatarGroup/Avatar/index.module.css | 6 ++----
 apps/site/components/Common/AvatarGroup/index.module.css  | 8 +++-----
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/apps/site/components/Common/AvatarGroup/Avatar/index.module.css b/apps/site/components/Common/AvatarGroup/Avatar/index.module.css
index 3e7bdb6bb98ef..0aadb7692d10a 100644
--- a/apps/site/components/Common/AvatarGroup/Avatar/index.module.css
+++ b/apps/site/components/Common/AvatarGroup/Avatar/index.module.css
@@ -34,12 +34,10 @@
   @apply xs:size-8
     xs:-ml-2
     ml-0.5
-    size-10
-    first:ml-0;
+    size-10;
 }
 
 .medium {
   @apply -ml-2.5
-    size-10
-    first:ml-0;
+    size-10;
 }
diff --git a/apps/site/components/Common/AvatarGroup/index.module.css b/apps/site/components/Common/AvatarGroup/index.module.css
index 3e01660bddc07..54a1de240b079 100644
--- a/apps/site/components/Common/AvatarGroup/index.module.css
+++ b/apps/site/components/Common/AvatarGroup/index.module.css
@@ -1,7 +1,5 @@
 .avatarGroup {
-  @apply -mb-4
-    flex
-    items-center
-    overflow-x-auto
-    pb-4;
+  @apply flex
+    flex-wrap
+    items-center;
 }

From 06f48bd34b18833f539ff05de6add898ef2dd9b2 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <augustin.mauroy@outlook.fr>
Date: Sat, 23 Nov 2024 14:31:52 +0100
Subject: [PATCH 2/2] fix: align

---
 .../Common/AvatarGroup/Avatar/index.module.css           | 8 ++------
 apps/site/components/Common/AvatarGroup/index.module.css | 9 +++++++++
 apps/site/components/Common/AvatarGroup/index.tsx        | 2 +-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/site/components/Common/AvatarGroup/Avatar/index.module.css b/apps/site/components/Common/AvatarGroup/Avatar/index.module.css
index 0aadb7692d10a..591354049bda0 100644
--- a/apps/site/components/Common/AvatarGroup/Avatar/index.module.css
+++ b/apps/site/components/Common/AvatarGroup/Avatar/index.module.css
@@ -21,8 +21,7 @@
 }
 
 .avatar {
-  @apply size-8
-    flex-shrink-0;
+  @apply size-8;
 
   .wrapper {
     @apply max-xs:block
@@ -32,12 +31,9 @@
 
 .small {
   @apply xs:size-8
-    xs:-ml-2
-    ml-0.5
     size-10;
 }
 
 .medium {
-  @apply -ml-2.5
-    size-10;
+  @apply size-10;
 }
diff --git a/apps/site/components/Common/AvatarGroup/index.module.css b/apps/site/components/Common/AvatarGroup/index.module.css
index 54a1de240b079..bc41f7647d5d1 100644
--- a/apps/site/components/Common/AvatarGroup/index.module.css
+++ b/apps/site/components/Common/AvatarGroup/index.module.css
@@ -3,3 +3,12 @@
     flex-wrap
     items-center;
 }
+
+.small {
+  @apply xs:-space-x-2
+    space-x-0.5;
+}
+
+.medium {
+  @apply -space-x-2.5;
+}
diff --git a/apps/site/components/Common/AvatarGroup/index.tsx b/apps/site/components/Common/AvatarGroup/index.tsx
index 87f8765f62a65..709c45affe461 100644
--- a/apps/site/components/Common/AvatarGroup/index.tsx
+++ b/apps/site/components/Common/AvatarGroup/index.tsx
@@ -35,7 +35,7 @@ const AvatarGroup: FC<AvatarGroupProps> = ({
   );
 
   return (
-    <div className={styles.avatarGroup}>
+    <div className={classNames(styles.avatarGroup, styles[size])}>
       {renderAvatars.map(({ ...avatar }) => (
         <Fragment key={avatar.nickname}>
           <Tooltip