fix emoji overflow

frontend/lib/chat.mjs

@@ -50,7 +50,7 @@ const setupChatboxEvents = (socket) => {
     emojiAutocomplete.append(
       ...(await emojis)
         .filter(([name]) => name.toLowerCase().startsWith(search.toLowerCase()))
-        .map(([name, replaceWith], i) => {
+        .map(([name, replaceWith, ext], i) => {
           const button = Object.assign(document.createElement("button"), {
             className: "emoji-option" + (i === 0 ? " selected" : ""),
             onmousedown: (e) => e.preventDefault(),
@@ -64,6 +64,7 @@ const setupChatboxEvents = (socket) => {
             onmouseover: () => select(button),
             onfocus: () => select(button),
             type: "button",
+            title: name,
           });
           button.append(
             replaceWith[0] !== ":"
@@ -73,10 +74,13 @@ const setupChatboxEvents = (socket) => {
                 })
               : Object.assign(new Image(), {
                   loading: "lazy",
-                  src: `/emojis/${name}.png`,
+                  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;
         })

frontend/lib/emojis.mjs

@@ -14,7 +14,7 @@ export async function emojify(text) {
       } else {
         nodes.push(
           Object.assign(new Image(), {
-            src: `/emojis/${name}.png`,
+            src: `/emojis/${name}${emoji[2]}`,
             className: "emoji",
             alt: name,
           })
@@ -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) + ":"])),
+    .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));

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 {

scripts/get_emojis.sh

@@ -20,4 +20,4 @@ read token
 printf "\n" 1>&2
 stty echo
 
-curl "https://discord.com/api/v9/guilds/${guild}/emojis" -H "Authorization: $token"  |  jq --raw-output 'map("curl '"'"'https://cdn.discordapp.com/emojis/" + .id + ".png?size=48&quality=lossless'"'"' -o '"'${emojiFolder}/"'" + .name + ".png'"'"'") | join("\n")' | sh
+curl "https://discord.com/api/v9/guilds/${guild}/emojis" -H "Authorization: $token"  |  jq  --raw-output 'map((if .animated then ".gif" else ".png" end) as $ext | "curl '"'"'https://cdn.discordapp.com/emojis/" + .id + $ext + "?size=48&quality=lossless'"'"' -o '"'${emojiFolder}/"'" + .name + $ext + "'"'"'") | join("\n")' | sh