From d8d22ed99ea23757791ae39b83416c633d0c7b56 Mon Sep 17 00:00:00 2001
From: easrng <me@easrng.net>
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 {