From 3df69c1e39cddcf37d8f11867a739a17911ab8be Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Tue, 14 Nov 2023 15:04:58 +0000
Subject: [PATCH] fix: chat style fixes

---
 src/element/emoji.tsx     |  2 +-
 src/element/live-chat.css | 16 +++++-----------
 src/element/text.tsx      |  2 +-
 3 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/element/emoji.tsx b/src/element/emoji.tsx
index a1e0c32..e303f87 100644
--- a/src/element/emoji.tsx
+++ b/src/element/emoji.tsx
@@ -8,7 +8,7 @@ export type EmojiProps = {
 };
 
 export function Emoji({ name, url }: EmojiProps) {
-  return <img alt={name} src={url} className="custom-emoji" />;
+  return <img alt={name} title={name} src={url} className="custom-emoji" />;
 }
 
 export function Emojify({ content, emoji }: { content: string; emoji: EmojiTag[] }) {
diff --git a/src/element/live-chat.css b/src/element/live-chat.css
index c05f8c7..ec5d06d 100644
--- a/src/element/live-chat.css
+++ b/src/element/live-chat.css
@@ -67,17 +67,17 @@
 .live-chat .message {
   word-wrap: break-word;
   position: relative;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 24px;
 }
 
 .live-chat .message .profile {
   gap: 8px;
   font-weight: 600;
-  font-size: 15px;
   float: left;
-}
-
-.live-chat .message .profile {
   color: #34d2fe;
+  margin-right: 8px;
 }
 
 .live-chat .message.streamer .profile {
@@ -86,6 +86,7 @@
 
 .live-chat .message a {
   color: #f838d9;
+  display: inline-flex;
 }
 
 .live-chat .profile img {
@@ -93,13 +94,6 @@
   height: 24px;
 }
 
-.live-chat .message > span {
-  font-weight: 400;
-  font-size: 15px;
-  line-height: 24px;
-  margin-left: 8px;
-}
-
 .live-chat .messages {
   color: white;
 }
diff --git a/src/element/text.tsx b/src/element/text.tsx
index 6f67634..77dd5b6 100644
--- a/src/element/text.tsx
+++ b/src/element/text.tsx
@@ -24,7 +24,7 @@ export function Text({ content, tags, eventComponent }: TextProps) {
   function renderFrag(f: ParsedFragment) {
     switch (f.type) {
       case "custom_emoji":
-        return <Emoji name="" url={f.content} />;
+        return <Emoji name={f.content} url={f.content} />;
       case "media":
       case "link": {
         if (f.content.startsWith("nostr:")) {