fix: chat style fixes

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[] }) {

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

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:")) {