fix: resolve zIndex problem which will make zIndex level incorrect

remove combined avatar zIndex and replace with divs

client/packages/design/components/Avatar/combined.css

@@ -3,7 +3,7 @@
   overflow: hidden;
 }
 
-.td-combined-avatar-2::after {
+.td-combined-avatar-2 > .line1 {
   content: '';
   position: absolute;
   height: 100%;
@@ -11,10 +11,9 @@
   background-color: white;
   left: 50%;
   top: 0;
-  z-index: 1;
 }
 
-.td-combined-avatar-3::before {
+.td-combined-avatar-3 > .line2 {
   content: '';
   position: absolute;
   width: 50%;
@@ -22,10 +21,9 @@
   background-color: white;
   right: 0;
   top: 50%;
-  z-index: 1;
 }
 
-.td-combined-avatar-3::after {
+.td-combined-avatar-3 > .line1 {
   content: '';
   position: absolute;
   height: 100%;
@@ -33,10 +31,9 @@
   background-color: white;
   left: 50%;
   top: 0;
-  z-index: 1;
 }
 
-.td-combined-avatar-4::before {
+.td-combined-avatar-4 > .line2 {
   content: '';
   position: absolute;
   width: 100%;
@@ -44,10 +41,9 @@
   background-color: white;
   left: 0;
   top: 50%;
-  z-index: 1;
 }
 
-.td-combined-avatar-4::after {
+.td-combined-avatar-4 > .line1 {
   content: '';
   position: absolute;
   height: 100%;
@@ -55,7 +51,6 @@
   background-color: white;
   left: 50%;
   top: 0;
-  z-index: 1;
 }
 
 .td-combined-avatar__item {

client/packages/design/components/Avatar/combined.tsx

@@ -96,6 +96,9 @@ export const CombinedAvatar: React.FC<CombinedAvatarProps> = React.memo(
             {...item}
           />
         ))}
+
+        {items.length >= 2 && <div className="line1" />}
+        {items.length >= 3 && <div className="line2" />}
       </div>
     );
   }

client/web/src/routes/Main/Content/PageContent.tsx

@@ -130,7 +130,6 @@ export const PageContent: React.FC<PropsWithChildren<PageContentProps>> =
             }
           )}
           data-tc-role={props['data-tc-role']}
-          style={{ zIndex: 1 }}
         >
           <div className="tc-content-background" />