From 6e2fd7a451544b176fcebec058ef69d2e7341801 Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Tue, 4 Apr 2023 12:44:36 +0200
Subject: [PATCH] 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
---
 .../discourse/components/chat-channel-title.hbs        |  1 +
 .../chat/assets/stylesheets/common/base-common.scss    |  3 +++
 .../assets/stylesheets/common/chat-channel-title.scss  | 10 ++++++++++
 .../chat/assets/stylesheets/common/chat-drawer.scss    |  4 ++++
 .../assets/stylesheets/desktop/chat-channel-title.scss |  6 ++++++
 plugins/chat/assets/stylesheets/mobile/chat-index.scss |  2 +-
 6 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-title.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-channel-title.hbs
index a3fc5b43b40..a693205e067 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-title.hbs
+++ b/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"}}
                 />
diff --git a/plugins/chat/assets/stylesheets/common/base-common.scss b/plugins/chat/assets/stylesheets/common/base-common.scss
index 7f53fb6172a..136b1b81897 100644
--- a/plugins/chat/assets/stylesheets/common/base-common.scss
+++ b/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;
       }
     }
   }
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-title.scss b/plugins/chat/assets/stylesheets/common/chat-channel-title.scss
index 38968f36c11..e9885136831 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel-title.scss
+++ b/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,
diff --git a/plugins/chat/assets/stylesheets/common/chat-drawer.scss b/plugins/chat/assets/stylesheets/common/chat-drawer.scss
index 8d3abf6d40e..947838ecaa9 100644
--- a/plugins/chat/assets/stylesheets/common/chat-drawer.scss
+++ b/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,
diff --git a/plugins/chat/assets/stylesheets/desktop/chat-channel-title.scss b/plugins/chat/assets/stylesheets/desktop/chat-channel-title.scss
index 019738fe4d9..75b5dbb496f 100644
--- a/plugins/chat/assets/stylesheets/desktop/chat-channel-title.scss
+++ b/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;
+    }
+  }
 }
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-index.scss b/plugins/chat/assets/stylesheets/mobile/chat-index.scss
index da742d7a934..ca1d864b559 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-index.scss
+++ b/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;
       }