fix: badge count positioning wrt to other elements in parent

Author: khushal87

package/src/components/Message/MessageSimple/MessageReplies.tsx

@@ -221,8 +221,6 @@ const useStyles = () => {
         alignItems: 'center',
         flexDirection: 'row',
         gap: primitives.spacingXs,
-        paddingTop: primitives.spacingXs,
-        paddingBottom: primitives.spacingXxs,
       },
       messageRepliesText: {
         color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textPrimary,

package/src/components/ui/Avatar/AvatarStack.tsx

@@ -10,7 +10,7 @@ import { UserAvatar } from './UserAvatar';
 import { BadgeCount } from '../Badge';
 
 export type AvatarStackProps = {
-  avatarSize?: 'sm' | 'md' | 'xs';
+  avatarSize?: 'md' | 'sm' | 'xs';
   maxVisible?: number;
   items: React.ReactNode[];
   overlap?: number;
@@ -26,13 +26,16 @@ export const AvatarStack = (props: AvatarStackProps) => {
 
   const totalWidth = diameter + (visibleItems.length - 1) * visiblePortion;
 
+  const badgeCountSize = avatarSize === 'md' ? 'lg' : avatarSize === 'sm' ? 'md' : 'sm';
+
   return (
     <View style={styles.wrapper}>
       <View
         style={[
           styles.container,
           {
             width: totalWidth,
+            height: diameter,
           },
         ]}
       >
@@ -58,15 +61,11 @@ export const AvatarStack = (props: AvatarStackProps) => {
           style={[
             styles.badgeCount,
             {
-              // This is to ensure the badge is aligned with the last avatar in the stack
               marginLeft: -(overlap * diameter),
             },
           ]}
         >
-          <BadgeCount
-            count={extraCount}
-            size={avatarSize === 'sm' || avatarSize === 'md' ? 'md' : 'sm'}
-          />
+          <BadgeCount count={extraCount} size={badgeCountSize} />
         </View>
       )}
     </View>
@@ -88,8 +87,8 @@ export const UserAvatarStack = ({
 }: UserAvatarStackProps) => {
   const items = useMemo(
     () =>
-      users.map((user) => {
-        return <UserAvatar key={user.id} user={user} size={avatarSize} showBorder />;
+      users.map((user, index) => {
+        return <UserAvatar key={`${user.id}-${index}`} user={user} size={avatarSize} showBorder />;
       }),
     [avatarSize, users],
   );