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,24 +422,26 @@ const Chat: FC<OwnProps & StateProps> = ({
       onDragLeave={onDragLeave}
     >
       <div className={buildClassName('status', 'status-clickable')}>
-        <Avatar
+        <div className="avatar-wrapper">
-          peer={isMonoforum ? monoforumChannel : peer}
+          <Avatar
-          isSavedMessages={user?.isSelf}
+            peer={isMonoforum ? monoforumChannel : peer}
-          isSavedDialog={isSavedDialog}
+            isSavedMessages={user?.isSelf}
-          size={isPreview ? 'medium' : 'large'}
+            isSavedDialog={isSavedDialog}
-          asMessageBubble={isMonoforum}
+            size={isPreview ? 'medium' : 'large'}
-          withStory={!user?.isSelf && !isMonoforum}
+            asMessageBubble={isMonoforum}
-          withStoryGap={isAvatarOnlineShown || Boolean(chat.subscriptionUntil)}
+            withStory={!user?.isSelf && !isMonoforum}
-          storyViewerOrigin={StoryViewerOrigin.ChatList}
+            withStoryGap={isAvatarOnlineShown || Boolean(chat.subscriptionUntil)}
-          storyViewerMode="single-peer"
+            storyViewerOrigin={StoryViewerOrigin.ChatList}
-        />
+            storyViewerMode="single-peer"
-        <div className="avatar-badge-wrapper">
-          <div
-            className={buildClassName('avatar-online', 'avatar-badge', isAvatarOnlineShown && 'avatar-online-shown')}
           />
-          {!isAvatarOnlineShown && Boolean(chat.subscriptionUntil) && (
+          <div className="avatar-badge-wrapper">
-            <StarIcon type="gold" className="avatar-badge avatar-subscription" size="adaptive" />
+            <div
-          )}
+              className={buildClassName('avatar-online', 'avatar-badge', isAvatarOnlineShown && 'avatar-online-shown')}
+            />
+            {!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 {