fix(console): grouped avatars should stack on each other (#4539)

packages/console/src/components/UserAvatar/index.module.scss

@@ -7,33 +7,33 @@
   border-radius: 8px;
   overflow: hidden;
   flex-shrink: 0;
+}
 
-  &.micro {
+.micro {
   width: 20px;
   height: 20px;
   border-radius: 6px;
 }
 
-  &.small {
+.small {
   width: 24px;
   height: 24px;
 }
 
-  &.medium {
+.medium {
   width: 32px;
   height: 32px;
 }
 
-  &.large {
+.large {
   width: 40px;
   height: 40px;
 }
 
-  &.xlarge {
+.xlarge {
   width: 60px;
   height: 60px;
 }
-}
 
 .avatar {
   display: flex;

packages/console/src/components/UserAvatar/index.tsx

@@ -92,16 +92,17 @@ function UserAvatar({ className, size = 'medium', user, hasTooltip = false }: Pr
   );
 
   return (
+    <div className={wrapperClassName}>
       <Tooltip
         className={styles.tooltip}
+        anchorClassName={styles[size]}
         content={conditional(hasTooltip && user && <UserInfoTipContent user={user} />)}
       >
-      <div className={wrapperClassName}>
         <div className={avatarClassName} style={{ backgroundColor: color }}>
           {nameToDisplay ? nameToDisplay.charAt(0) : <DefaultAvatar />}
         </div>
-      </div>
       </Tooltip>
+    </div>
   );
 }