diff --git a/assets/chat/css/chat/_autocomplete.scss b/assets/chat/css/chat/_autocomplete.scss index bdc48e2b..327bc765 100644 --- a/assets/chat/css/chat/_autocomplete.scss +++ b/assets/chat/css/chat/_autocomplete.scss @@ -24,36 +24,45 @@ } ul { + display: inline-flex; + align-items: center; position: absolute; white-space: nowrap; list-style: none; padding: 0; margin: 0; } +} - li { - padding: 0 a.$gutter-sm; - cursor: pointer; - text-decoration: none; - display: inline-block; - color: a.$color-chat-text3; - background: rgba(a.$color-surface-dark1, 0.75); +.autocomplete-entry { + padding: 0 a.$gutter-sm; + cursor: pointer; + text-decoration: none; + display: inline-flex; + gap: a.$gutter-sm; + color: a.$color-chat-text3; + background: rgba(a.$color-surface-dark1, 0.75); - &:first-child { - border-radius: a.$bradius 0 0 0; - } + &__emote { + display: inline-flex; + align-items: center; + zoom: 0.75; + } - &:last-child { - border-radius: 0 a.$bradius 0 0; - } + &:first-child { + border-radius: a.$bradius 0 0 0; + } - &:hover { - color: color.adjust(a.$color-chat-text3, $lightness: 20%); - } + &:last-child { + border-radius: 0 a.$bradius 0 0; + } - &.active { - color: a.$text-color; - } + &:hover { + color: color.adjust(a.$color-chat-text3, $lightness: 20%); + } + + &.active { + color: a.$text-color; } } diff --git a/assets/chat/js/autocomplete.js b/assets/chat/js/autocomplete.js index e42854a8..e42b866f 100644 --- a/assets/chat/js/autocomplete.js +++ b/assets/chat/js/autocomplete.js @@ -352,7 +352,13 @@ class ChatAutoComplete { buildHelpers() { if (this.results.length > 0) { this.container[0].innerHTML = this.results - .map((res, k) => `