From d8d22ed99ea23757791ae39b83416c633d0c7b56 Mon Sep 17 00:00:00 2001 From: easrng Date: Fri, 18 Feb 2022 12:31:34 -0500 Subject: [PATCH] fix emoji overflow --- frontend/lib/chat.mjs | 6 +++++- frontend/lib/emojis.mjs | 4 +++- frontend/styles.css | 3 +++ 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/frontend/lib/chat.mjs b/frontend/lib/chat.mjs index 60339df..3547778 100644 --- a/frontend/lib/chat.mjs +++ b/frontend/lib/chat.mjs @@ -64,6 +64,7 @@ const setupChatboxEvents = (socket) => { onmouseover: () => select(button), onfocus: () => select(button), type: "button", + title: name, }); button.append( replaceWith[0] !== ":" @@ -76,7 +77,10 @@ const setupChatboxEvents = (socket) => { src: `/emojis/${name}${ext}`, className: "emoji", }), - Object.assign(document.createElement("span"), { textContent: name }) + Object.assign(document.createElement("span"), { + textContent: name, + className: "emoji-name", + }) ); return button; }) diff --git a/frontend/lib/emojis.mjs b/frontend/lib/emojis.mjs index 72dfb60..33a98af 100644 --- a/frontend/lib/emojis.mjs +++ b/frontend/lib/emojis.mjs @@ -29,6 +29,8 @@ export async function emojify(text) { export const emojis = Promise.all([ fetch("/emojis") .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()), ]).then((e) => e.flat(1)); diff --git a/frontend/styles.css b/frontend/styles.css index 182e9f4..51230d7 100644 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -171,6 +171,7 @@ button.small-button { color: var(--user-color, var(--default-user-color)); } +/* @supports (-webkit-background-clip: text) { .chat-message > strong, #viewer-list strong { @@ -183,6 +184,7 @@ button.small-button { color: transparent !important; } } +*/ .chat-message.user-join, .chat-message.user-leave, @@ -294,6 +296,7 @@ button.small-button { align-items: center; justify-content: center; overflow: hidden; + flex-shrink: 0; } .emoji-option.selected {