fix(avatar): ⚡ resolve avatar stacking issue by setting zIndex values

Karthik-B-06 · crstnmac · commit 9f562b1c8999 · 2023-01-06T12:06:35.000+05:30
diff --git a/src/components/avatar-group/AvatarGroup.tsx b/src/components/avatar-group/AvatarGroup.tsx
@@ -77,6 +77,7 @@ export const AvatarGroup: React.FC<Partial<AvatarGroupProps>> = props => {
               showRing
                 ? { borderColor: ringColor, backgroundColor: ringColor }
                 : {},
+              { zIndex: childrenWithinMax.length - index },
             ]}
             key={index}
           >
diff --git a/src/theme/defaultTheme/avatar.ts b/src/theme/defaultTheme/avatar.ts
@@ -117,7 +117,7 @@ export const avatar = {
     },
   },
   group: {
-    base: "flex-row items-center",
+    base: "relative flex-row items-center",
     avatarWrapper: {
       ringStyle: "border-2",
       circular: "rounded-full",

Original file line number	Diff line number	Diff line change
`@@ -77,6 +77,7 @@ export const AvatarGroup: React.FC<Partial<AvatarGroupProps>> = props => {`
`77`	`77`	`showRing`
`78`	`78`	`? { borderColor: ringColor, backgroundColor: ringColor }`
`79`	`79`	`: {},`
	`80`	`+ { zIndex: childrenWithinMax.length - index },`
`80`	`81`	`]}`
`81`	`82`	`key={index}`
`82`	`83`	`>`