fix emoji overflow

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;
         })

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));

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 {