From ce2f09721d8ee01e5f461598a76e628f69fa56e1 Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Tue, 2 Jul 2024 21:58:46 +0100
Subject: [PATCH] fixed emote display in usernames and reactions

---
 src/lib/app.css                       | 5 +++++
 src/lib/ui/Navigation.svelte          | 7 ++++++-
 src/lib/ui/post/ReactionButton.svelte | 2 +-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/lib/app.css b/src/lib/app.css
index d010639..191f143 100644
--- a/src/lib/app.css
+++ b/src/lib/app.css
@@ -74,6 +74,11 @@ main {
     width: 732px;
 }
 
+img.emoji {
+    height: 1.2em;
+    margin: -.1em 0;
+}
+
 .throb {
     animation: .25s throb alternate infinite ease-in;
 }
diff --git a/src/lib/ui/Navigation.svelte b/src/lib/ui/Navigation.svelte
index c4ce6e5..26cbed5 100644
--- a/src/lib/ui/Navigation.svelte
+++ b/src/lib/ui/Navigation.svelte
@@ -153,7 +153,7 @@
         <div id="account-button">
             <img src={$user.avatar_url} class="account-avatar" height="64px" alt="" aria-hidden="true" on:click={() => play_sound()}>
             <div class="account-name" aria-hidden="true">
-                <a href={$user.url} class="nickname" title={$user.nickname}>{$user.nickname}</a>
+                <a href={$user.url} class="nickname" title={$user.nickname}>{@html $user.rich_name}</a>
                 <span class="username" title={`@${$user.username}@${$user.host}`}>
                     {`@${$user.username}@${$user.host}`}
                 </span>
@@ -345,6 +345,11 @@
         font-size: .65em;
     }
 
+    .nickname :global(.emoji) {
+        height: 1.2em;
+        margin: -.1em 0;
+    }
+
     .flex-row {
         display: flex;
         flex-direction: row;
diff --git a/src/lib/ui/post/ReactionButton.svelte b/src/lib/ui/post/ReactionButton.svelte
index fee3a97..7e51889 100644
--- a/src/lib/ui/post/ReactionButton.svelte
+++ b/src/lib/ui/post/ReactionButton.svelte
@@ -72,7 +72,7 @@
     }
 
     .icon {
-        width: 20px;
+        min-width: 20px;
         height: 20px;
         display: flex;
         justify-content: center;