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 @@
{{user.username}}
{{#if this.showUserStatus}}
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;
}