UX: Chat channel title overflow ellipsis fixes (#20956)

* UX: add correct class

* UX: prioritise name over user messages when truncating

* UX: add missing overflows to enable ellipsis

plugins/chat/assets/javascripts/discourse/components/chat-channel-title.hbs

@@ -28,6 +28,7 @@
               <span class="chat-channel-title__name">{{user.username}}</span>
               {{#if this.showUserStatus}}
                 <UserStatusMessage
+                  @class="chat-channel-title__user-status-message"
                   @status={{this.channel.chatable.users.firstObject.status}}
                   @showDescription={{if this.site.mobileView "true"}}
                 />

plugins/chat/assets/stylesheets/common/base-common.scss

@@ -262,6 +262,7 @@ $float-height: 530px;
   width: 100%;
   min-height: 1px;
   position: relative;
+  overflow: hidden;
 
   .open-drawer-btn {
     color: var(--primary-low-mid);
@@ -479,6 +480,7 @@ body.has-full-page-chat {
     display: flex;
     align-items: stretch;
     flex: 1;
+    max-width: 100%;
 
     .chat-channel-archive-status {
       text-align: right;
@@ -616,6 +618,7 @@ html.has-full-page-chat {
 
       .main-chat-outlet {
         min-height: 0;
+        overflow: hidden;
       }
     }
   }

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

@@ -1,6 +1,7 @@
 .chat-channel-title-wrapper {
   display: flex;
   align-items: center;
+  overflow: hidden;
 }
 
 .chat-channel-title {
@@ -8,10 +9,19 @@
   align-items: center;
   @include ellipsis;
 
+  &__user-info {
+    overflow: hidden;
+  }
+
   .user-status-message {
     display: none; // we only show when in channels list
   }
 
+  &__user-status-message {
+    flex-shrink: 3;
+    overflow: hidden;
+  }
+
   .chat-name,
   .category-chat-name,
   &__usernames,

plugins/chat/assets/stylesheets/common/chat-drawer.scss

@@ -153,6 +153,10 @@ html.rtl {
     font-weight: 700;
     width: 100%;
 
+    &__user-info {
+      overflow: hidden;
+    }
+
     .chat-name,
     .chat-drawer-name,
     .category-chat-name,

plugins/chat/assets/stylesheets/desktop/chat-channel-title.scss

@@ -5,4 +5,10 @@
     background: var(--primary-very-low);
     border-radius: 5px;
   }
+
+  .chat-channel-title {
+    &__user-info {
+      overflow: hidden;
+    }
+  }
 }

plugins/chat/assets/stylesheets/mobile/chat-index.scss

@@ -61,7 +61,6 @@
       }
 
       &__name {
-        flex-shrink: 0;
         margin-left: 0.75em;
         font-size: var(--font-up-1);
       }
@@ -71,6 +70,7 @@
       }
 
       &__user-status-message {
+        flex-shrink: 3;
         overflow: hidden;
         text-overflow: ellipsis;
       }