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; }