diff --git a/plugins/chat/assets/stylesheets/common/chat-message-creator.scss b/plugins/chat/assets/stylesheets/common/chat-message-creator.scss index 576d8082f65..c23ab6cd760 100644 --- a/plugins/chat/assets/stylesheets/common/chat-message-creator.scss +++ b/plugins/chat/assets/stylesheets/common/chat-message-creator.scss @@ -65,11 +65,11 @@ } .action-indicator { - visibility: hidden; + display: none; margin-left: auto; + white-space: nowrap; font-size: var(--font-down-1); color: var(--secondary-medium); - display: flex; align-items: center; padding-right: 0.25rem; @@ -80,7 +80,7 @@ &.-active { .action-indicator { - visibility: visible; + display: flex; } } @@ -100,6 +100,7 @@ .chat-channel-title__name, .chat-user-display-name { + @include ellipsis; padding-left: 0.5rem; } @@ -128,6 +129,8 @@ } } .disabled-text { + margin-left: auto; + white-space: nowrap; padding-left: 0.25rem; } } @@ -138,6 +141,7 @@ display: flex; flex-direction: column; flex: 1; + width: 100%; &-container { display: flex; @@ -209,9 +213,9 @@ box-sizing: border-box; cursor: pointer; display: inline-flex; - background: var(--primary-low); + background: var(--primary-very-low); border-radius: 5px; - border: 1px solid var(--primary-very-low); + border: 1px solid var(--primary-low); height: calc(var(--row-height) - 6); padding-inline: 0.25rem; margin: 3px; @@ -253,6 +257,7 @@ display: flex; align-items: center; height: var(--row-height); + margin-left: 0.5rem; } } diff --git a/plugins/chat/assets/stylesheets/mobile/chat-message-creator.scss b/plugins/chat/assets/stylesheets/mobile/chat-message-creator.scss index 4bd4d0ff86a..5f9b7ad18f8 100644 --- a/plugins/chat/assets/stylesheets/mobile/chat-message-creator.scss +++ b/plugins/chat/assets/stylesheets/mobile/chat-message-creator.scss @@ -3,4 +3,38 @@ width: 100%; max-width: 100%; } + + &__row { + padding-block: 0.5rem; + } + + .chat-channel-title__name, + .chat-user-display-name { + font-size: var(--font-up-1); + } + + .chat-channel-title__category-badge { + display: flex; + align-items: center; + justify-content: center; + padding-inline: 2px; + width: 24px; + height: 24px; + + svg:not(.chat-channel-title__restricted-category-icon) { + height: inherit; + width: inherit; + } + } + + .chat-user-avatar { + &__container { + padding: 0; + } + img { + width: 28px; + height: 28px; + box-sizing: border-box; + } + } }