Fix long chat messages centering

thomaserlang · Oct 31, 2024 · b8cb9b3 · b8cb9b3
1 parent f77b5de
commit b8cb9b3
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 42 deletions.
diff --git a/tbot/web/ui/live_chat/components/chat.scss b/tbot/web/ui/live_chat/components/chat.scss
@@ -18,26 +18,27 @@
 
 .message {
     padding: 2px 0;
-    display: flex;
     gap: 0.5rem;
-    align-items: center;
+    vertical-align: baseline;
 }
 
 .username {
     font-weight: 700;
     color: #ffa600; 
+    display: inline;
 }
 
 .text {
     color: #ffffff;
     word-wrap: break-word;
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
+    display: inline;
+    vertical-align: baseline;
+    margin-left: 0.25rem;
 }
 
 .provider {
     font-weight: bold;
+    margin-right: 0.5rem;
 }
 
 .twitch {
@@ -50,6 +51,7 @@
 
 .time {
     color: #8c8c8c;
+    margin-right: 0.5rem;
 }
 
 .notice {
@@ -60,12 +62,6 @@
 }
 
 .emotettv-img {
-    width: 2rem;
-    height: 2rem;
-}
-
-.emotettv-badge {
-    width: 1.5rem;
-    height: 1.5rem;
-    margin-top: -0.2rem;
+    max-width: 2rem;
+    max-height: 2rem;
 }
diff --git a/tbot/web/ui/live_chat/components/render_message.jsx b/tbot/web/ui/live_chat/components/render_message.jsx
@@ -6,36 +6,19 @@ import "./chat.scss";
 export function RenderMessage({ msg }) {
   return (
     <div className="message">
-      <div className="time">
+      <span className="time">
         {new Date(msg.created_at).toLocaleTimeString([], {
           hour: "2-digit",
           minute: "2-digit",
           hour12: false,
         })}
-      </div>
-
+      </span>
       {providerShort(msg.provider)}
-
-      <div
-        className="badges"
-        dangerouslySetInnerHTML={{
-          __html: sanitizeHtml(msg.badgesHTML, {
-            allowedTags: ["img"],
-            allowedAttributes: {
-              img: ["src", "title", "class"],
-            },
-          }),
-        }}
-      ></div>
-
-      <div>
-        <span className="username" style={{ color: msg.user_color }}>
-          {msg.user}
-        </span>
-        :
-      </div>
-
-      <div
+      <span className="username" style={{ color: msg.user_color }}>
+        {msg.user}
+      </span>
+      :
+      <span
         className="text"
         dangerouslySetInnerHTML={{
           __html: sanitizeHtml(msg.message, {
@@ -45,7 +28,7 @@ export function RenderMessage({ msg }) {
             },
           }),
         }}
-      ></div>
+      ></span>
     </div>
   );
 }
diff --git a/tbot/web/ui/live_chat/components/render_mod_action.jsx b/tbot/web/ui/live_chat/components/render_mod_action.jsx
@@ -3,15 +3,15 @@ import { providerShort } from "./provider_short";
 export function RenderModAction({ msg }) {
   return (
     <div className="message">
-      <div className="time">
+      <span className="time">
         {new Date(msg.created_at).toLocaleTimeString([], {
           hour: "2-digit",
           minute: "2-digit",
           hour12: false,
         })}
-      </div>
+      </span>
       {providerShort(msg.provider)}
-      <div className="time">{msg.message}</div>
+      <span className="time">{msg.message}</span>
     </div>
   );
 }
diff --git a/tbot/web/ui/live_chat/components/render_notice.jsx b/tbot/web/ui/live_chat/components/render_notice.jsx
@@ -1,7 +1,7 @@
 export function RenderNotice({ msg }) {
   return (
     <div className="notice">
-      <div className="text">{msg.message}</div>
+      <span className="text">{msg.message}</span>
     </div>
   );
 }