From 4ff79a22e63194ed0396e684e102be902f4e4707 Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Fri, 6 Mar 2026 21:00:25 +0530
Subject: [PATCH 1/4] fix: badge count positioning wrt to other elements in
 parent

---
 .../src/components/ui/Avatar/AvatarStack.tsx  | 78 +++++++++++--------
 1 file changed, 46 insertions(+), 32 deletions(-)

diff --git a/package/src/components/ui/Avatar/AvatarStack.tsx b/package/src/components/ui/Avatar/AvatarStack.tsx
index bdb6991fbc..edec656906 100644
--- a/package/src/components/ui/Avatar/AvatarStack.tsx
+++ b/package/src/components/ui/Avatar/AvatarStack.tsx
@@ -24,41 +24,51 @@ export const AvatarStack = (props: AvatarStackProps) => {
   const visibleItems = items.slice(0, maxVisible);
   const extraCount = items.length - visibleItems.length;
 
-  if (extraCount > 0) {
-    visibleItems.push(
-      <BadgeCount
-        count={extraCount}
-        size={avatarSize === 'sm' || avatarSize === 'md' ? 'md' : 'sm'}
-      />,
-    );
-  }
-
   const totalWidth = diameter + (visibleItems.length - 1) * visiblePortion;
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          width: totalWidth,
-        },
-      ]}
-    >
-      {visibleItems.map((item, index) => {
-        return (
-          <View
-            style={[
-              styles.item,
-              {
-                left: index * visiblePortion,
-              },
-            ]}
-            key={index}
-          >
-            {item}
-          </View>
-        );
-      })}
+    <View style={styles.wrapper}>
+      <View
+        style={[
+          styles.container,
+          {
+            width: totalWidth,
+          },
+        ]}
+      >
+        {visibleItems.map((item, index) => {
+          return (
+            <View
+              style={[
+                styles.item,
+                {
+                  left: index * visiblePortion,
+                },
+              ]}
+              key={index}
+            >
+              {item}
+            </View>
+          );
+        })}
+      </View>
+
+      {extraCount > 0 && (
+        <View
+          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'}
+          />
+        </View>
+      )}
     </View>
   );
 };
@@ -100,6 +110,10 @@ const useStyles = () => {
         item: {
           position: 'absolute',
         },
+        badgeCount: {},
+        wrapper: {
+          flexDirection: 'row',
+        },
       }),
     [],
   );

From 1733848943d7f3a34ff08593947a39bb9b7c208f Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Fri, 6 Mar 2026 21:29:43 +0530
Subject: [PATCH 2/4] fix: badge count positioning wrt to other elements in
 parent

---
 .../Message/MessageSimple/MessageReplies.tsx      |  2 --
 package/src/components/ui/Avatar/AvatarStack.tsx  | 15 +++++++--------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/package/src/components/Message/MessageSimple/MessageReplies.tsx b/package/src/components/Message/MessageSimple/MessageReplies.tsx
index 56f40c8eb4..1c4df86f00 100644
--- a/package/src/components/Message/MessageSimple/MessageReplies.tsx
+++ b/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,
diff --git a/package/src/components/ui/Avatar/AvatarStack.tsx b/package/src/components/ui/Avatar/AvatarStack.tsx
index edec656906..81b2386c16 100644
--- a/package/src/components/ui/Avatar/AvatarStack.tsx
+++ b/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,6 +26,8 @@ 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
@@ -33,6 +35,7 @@ export const AvatarStack = (props: AvatarStackProps) => {
           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],
   );

From ba420a87bd46fff4bd5a5b4a7da865427b90660e Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Fri, 6 Mar 2026 21:32:27 +0530
Subject: [PATCH 3/4] fix: badge sizes

---
 .../TypingIndicator.test.js.snap              | 189 +++++++++---------
 1 file changed, 99 insertions(+), 90 deletions(-)

diff --git a/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap b/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap
index 7dec17f847..fccd5171a1 100644
--- a/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap
+++ b/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap
@@ -27,134 +27,143 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
   >
     <View
       style={
-        [
-          {
-            "alignItems": "center",
-            "flexDirection": "row",
-          },
-          {
-            "width": 51.2,
-          },
-        ]
+        {
+          "flexDirection": "row",
+        }
       }
     >
       <View
         style={
           [
             {
-              "position": "absolute",
+              "alignItems": "center",
+              "flexDirection": "row",
             },
             {
-              "left": 0,
+              "height": 32,
+              "width": 51.2,
             },
           ]
         }
       >
         <View
-          testID="user-avatar"
+          style={
+            [
+              {
+                "position": "absolute",
+              },
+              {
+                "left": 0,
+              },
+            ]
+          }
         >
           <View
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "borderRadius": 9999,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                },
-                {
-                  "height": 32,
-                  "width": 32,
-                },
-                {
-                  "backgroundColor": "#fcd579",
-                },
-                {
-                  "borderColor": "rgba(0, 0, 0, 0.1)",
-                  "borderWidth": 1,
-                },
-                undefined,
-              ]
-            }
-            testID="avatar-image"
+            testID="user-avatar"
           >
-            <Image
-              onError={[Function]}
-              source={
-                {
-                  "uri": "https://i.imgur.com/LuuGvh0.png",
-                }
-              }
+            <View
               style={
                 [
-                  {},
+                  {
+                    "alignItems": "center",
+                    "borderRadius": 9999,
+                    "justifyContent": "center",
+                    "overflow": "hidden",
+                  },
                   {
                     "height": 32,
                     "width": 32,
                   },
+                  {
+                    "backgroundColor": "#fcd579",
+                  },
+                  {
+                    "borderColor": "rgba(0, 0, 0, 0.1)",
+                    "borderWidth": 1,
+                  },
+                  undefined,
                 ]
               }
-            />
+              testID="avatar-image"
+            >
+              <Image
+                onError={[Function]}
+                source={
+                  {
+                    "uri": "https://i.imgur.com/LuuGvh0.png",
+                  }
+                }
+                style={
+                  [
+                    {},
+                    {
+                      "height": 32,
+                      "width": 32,
+                    },
+                  ]
+                }
+              />
+            </View>
           </View>
         </View>
-      </View>
-      <View
-        style={
-          [
-            {
-              "position": "absolute",
-            },
-            {
-              "left": 19.2,
-            },
-          ]
-        }
-      >
         <View
-          testID="user-avatar"
+          style={
+            [
+              {
+                "position": "absolute",
+              },
+              {
+                "left": 19.2,
+              },
+            ]
+          }
         >
           <View
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "borderRadius": 9999,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                },
-                {
-                  "height": 32,
-                  "width": 32,
-                },
-                {
-                  "backgroundColor": "#8febbd",
-                },
-                {
-                  "borderColor": "rgba(0, 0, 0, 0.1)",
-                  "borderWidth": 1,
-                },
-                undefined,
-              ]
-            }
-            testID="avatar-image"
+            testID="user-avatar"
           >
-            <Image
-              onError={[Function]}
-              source={
-                {
-                  "uri": "https://i.imgur.com/spueyAP.png",
-                }
-              }
+            <View
               style={
                 [
-                  {},
+                  {
+                    "alignItems": "center",
+                    "borderRadius": 9999,
+                    "justifyContent": "center",
+                    "overflow": "hidden",
+                  },
                   {
                     "height": 32,
                     "width": 32,
                   },
+                  {
+                    "backgroundColor": "#8febbd",
+                  },
+                  {
+                    "borderColor": "rgba(0, 0, 0, 0.1)",
+                    "borderWidth": 1,
+                  },
+                  undefined,
                 ]
               }
-            />
+              testID="avatar-image"
+            >
+              <Image
+                onError={[Function]}
+                source={
+                  {
+                    "uri": "https://i.imgur.com/spueyAP.png",
+                  }
+                }
+                style={
+                  [
+                    {},
+                    {
+                      "height": 32,
+                      "width": 32,
+                    },
+                  ]
+                }
+              />
+            </View>
           </View>
         </View>
       </View>

From c8327615186bbd5f1ab3a91679a7b924f956d9ef Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Fri, 6 Mar 2026 21:33:49 +0530
Subject: [PATCH 4/4] fix: badge sizes

---
 package/src/components/ui/Avatar/AvatarStack.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package/src/components/ui/Avatar/AvatarStack.tsx b/package/src/components/ui/Avatar/AvatarStack.tsx
index 81b2386c16..e3c11f19c3 100644
--- a/package/src/components/ui/Avatar/AvatarStack.tsx
+++ b/package/src/components/ui/Avatar/AvatarStack.tsx
@@ -87,8 +87,8 @@ export const UserAvatarStack = ({
 }: UserAvatarStackProps) => {
   const items = useMemo(
     () =>
-      users.map((user, index) => {
-        return <UserAvatar key={`${user.id}-${index}`} user={user} size={avatarSize} showBorder />;
+      users.map((user) => {
+        return <UserAvatar key={user.id} user={user} size={avatarSize} showBorder />;
       }),
     [avatarSize, users],
   );