fix emoji overflow

votekiss
easrng 2022-02-18 12:31:34 -05:00
parent d1e4acf6e8
commit d8d22ed99e
3 changed files with 11 additions and 2 deletions

View File

@ -64,6 +64,7 @@ const setupChatboxEvents = (socket) => {
onmouseover: () => select(button), onmouseover: () => select(button),
onfocus: () => select(button), onfocus: () => select(button),
type: "button", type: "button",
title: name,
}); });
button.append( button.append(
replaceWith[0] !== ":" replaceWith[0] !== ":"
@ -76,7 +77,10 @@ const setupChatboxEvents = (socket) => {
src: `/emojis/${name}${ext}`, src: `/emojis/${name}${ext}`,
className: "emoji", className: "emoji",
}), }),
Object.assign(document.createElement("span"), { textContent: name }) Object.assign(document.createElement("span"), {
textContent: name,
className: "emoji-name",
})
); );
return button; return button;
}) })

View File

@ -29,6 +29,8 @@ export async function emojify(text) {
export const emojis = Promise.all([ export const emojis = Promise.all([
fetch("/emojis") fetch("/emojis")
.then((e) => e.json()) .then((e) => e.json())
.then((e) => e.map((e) => [e.slice(0, -4), ":" + e.slice(0, -4) + ":", e.slice(-4)])), .then((e) =>
e.map((e) => [e.slice(0, -4), ":" + e.slice(0, -4) + ":", e.slice(-4)])
),
fetch("/emojis/unicode.json").then((e) => e.json()), fetch("/emojis/unicode.json").then((e) => e.json()),
]).then((e) => e.flat(1)); ]).then((e) => e.flat(1));

View File

@ -171,6 +171,7 @@ button.small-button {
color: var(--user-color, var(--default-user-color)); color: var(--user-color, var(--default-user-color));
} }
/*
@supports (-webkit-background-clip: text) { @supports (-webkit-background-clip: text) {
.chat-message > strong, .chat-message > strong,
#viewer-list strong { #viewer-list strong {
@ -183,6 +184,7 @@ button.small-button {
color: transparent !important; color: transparent !important;
} }
} }
*/
.chat-message.user-join, .chat-message.user-join,
.chat-message.user-leave, .chat-message.user-leave,
@ -294,6 +296,7 @@ button.small-button {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
flex-shrink: 0;
} }
.emoji-option.selected { .emoji-option.selected {