feat(AvatarGroup): update overflow (#7273)

* feat(AvatarGroupe): update overflow

* fix: align

Author: AugustinMauroy

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,14 +31,9 @@
 
 .small {
   @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;
+  @apply size-10;
 }

apps/site/components/Common/AvatarGroup/index.module.css

@@ -1,7 +1,14 @@
 .avatarGroup {
-  @apply -mb-4
-    flex
-    items-center
-    overflow-x-auto
-    pb-4;
+  @apply flex
+    flex-wrap
+    items-center;
+}
+
+.small {
+  @apply xs:-space-x-2
+    space-x-0.5;
+}
+
+.medium {
+  @apply -space-x-2.5;
 }

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