Chat List: Move unread badge on forum view (#6837)

src/components/left/main/Chat.scss

@@ -137,22 +137,18 @@
     align-self: stretch;
   }
 
-  .avatar-badge-wrapper {
+  .avatar-wrapper {
     --outline-color: var(--color-background);
 
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  .avatar-badge-wrapper {
     position: absolute;
     z-index: var(--z-badge);
     right: 0.5rem;
     bottom: 0;
-
-    .chat-badge-transition {
-      position: relative;
-      transition: opacity var(--layer-transition), transform var(--layer-transition);
-
-      body.no-page-transitions & {
-        transition: opacity var(--layer-transition);
-      }
-    }
   }
 
   .avatar-badge {

src/components/left/main/Chat.tsx

@@ -422,6 +422,7 @@ const Chat: FC<OwnProps & StateProps> = ({
       onDragLeave={onDragLeave}
     >
       <div className={buildClassName('status', 'status-clickable')}>
+        <div className="avatar-wrapper">
           <Avatar
             peer={isMonoforum ? monoforumChannel : peer}
             isSavedMessages={user?.isSelf}
@@ -440,6 +441,7 @@ const Chat: FC<OwnProps & StateProps> = ({
             {!isAvatarOnlineShown && Boolean(chat.subscriptionUntil) && (
               <StarIcon type="gold" className="avatar-badge avatar-subscription" size="adaptive" />
             )}
+          </div>
           <ChatBadge
             chat={chat}
             isMuted={isMuted}

src/components/left/main/ChatBadge.module.scss

@@ -50,6 +50,13 @@
   display: flex;
 }
 
+.onAvatar {
+  position: absolute;
+  z-index: 1;
+  top: 0.0625rem;
+  right: 0.3125rem;
+}
+
 .mention,
 .unread,
 .unopened {