UX: chat index flex issues (#29157)

plugins/chat/assets/javascripts/discourse/components/channel-name/index.gjs

@@ -69,10 +69,6 @@ export default class ChatChannelName extends Component {
       <div class="chat-channel-name__label">
         {{replaceEmoji this.channelTitle}}
 
-        {{#if this.unreadIndicator}}
-          <ChatChannelUnreadIndicator @channel={{@channel}} />
-        {{/if}}
-
         {{#if this.showUserStatus}}
           <UserStatusMessage
             @status={{get this.users "0.status"}}
@@ -94,6 +90,10 @@ export default class ChatChannelName extends Component {
           {{yield}}
         {{/if}}
       </div>
+
+      {{#if this.unreadIndicator}}
+        <ChatChannelUnreadIndicator @channel={{@channel}} />
+      {{/if}}
     </div>
   </template>
 }

plugins/chat/assets/stylesheets/common/chat-channel-name.scss

@@ -2,6 +2,12 @@
   @include ellipsis;
   color: var(--primary);
 
+  .chat-channel-row__info & {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+  }
+
   .has-unread & {
     font-weight: bold;
   }