From 26d73018858a4933bb30cd2f706c01ad2becf414 Mon Sep 17 00:00:00 2001
From: Jack <36623994+jackWhtman@users.noreply.github.com>
Date: Fri, 16 Feb 2024 14:02:46 +0530
Subject: [PATCH] fix: [CAL-3141] (+1) badge not aligned (#13718)

* Fixes [CAL-3141] (+1) badge not aligned

* fix: centering

---------

Co-authored-by: Udit Takkar <udit222001@gmail.com>
---
 packages/ui/components/avatar/AvatarGroup.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/components/avatar/AvatarGroup.tsx b/packages/ui/components/avatar/AvatarGroup.tsx
index 5ecf80891a..be09cff71e 100644
--- a/packages/ui/components/avatar/AvatarGroup.tsx
+++ b/packages/ui/components/avatar/AvatarGroup.tsx
@@ -29,7 +29,7 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
   return (
     <ul className={classNames("flex items-center", props.className)}>
       {displayedAvatars.map((item, idx) => (
-        <li key={idx} className="-mr-[4px] inline-block">
+        <li key={idx} className="-mr-1 inline-block">
           <Avatar
             data-testid="avatar"
             className="border-subtle"
@@ -44,12 +44,12 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
       {numTruncatedAvatars > 0 && (
         <li
           className={classNames(
-            "bg-inverted relative -mr-[4px] mb-1 inline-flex justify-center overflow-hidden rounded-full",
+            "bg-inverted relative -mr-1 inline-flex justify-center  overflow-hidden rounded-full",
             props.size === "sm" ? "min-w-6 h-6" : "min-w-16 h-16"
           )}>
           <span
             className={classNames(
-              "text-inverted m-auto px-1 text-center",
+              " text-inverted m-auto flex h-full w-full items-center justify-center text-center",
               props.size === "sm" ? "text-[12px]" : "text-2xl"
             )}>
             +{numTruncatedAvatars}