From e3d9d8079a5717c6bf8e95da5905437a21b758d7 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Wed, 26 Jul 2023 20:21:09 +0200
Subject: [PATCH] fix: emoji styles

---
 src/element/emoji-pack.css | 12 ++++++++++++
 src/element/emoji-pack.tsx |  7 ++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/element/emoji-pack.css b/src/element/emoji-pack.css
index 00663ec..463cfbd 100644
--- a/src/element/emoji-pack.css
+++ b/src/element/emoji-pack.css
@@ -9,12 +9,24 @@
 }
 
 .emoji-pack-emojis {
+  margin-top: 12px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 4px;
 }
 
+.emoji-definition {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.emoji-name {
+  font-size: 10px;
+}
+
 .emoji-pack h4 {
   margin: 0;
 }
diff --git a/src/element/emoji-pack.tsx b/src/element/emoji-pack.tsx
index 3455463..59b5139 100644
--- a/src/element/emoji-pack.tsx
+++ b/src/element/emoji-pack.tsx
@@ -16,7 +16,12 @@ export function EmojiPack({ ev }: { ev: NostrEvent }) {
       <div className="emoji-pack-emojis">
         {emoji.map((e) => {
           const [, name, image] = e;
-          return <img alt={name} className="emoji" src={image} />;
+          return (
+            <div className="emoji-definition">
+              <img alt={name} className="emoji" src={image} />
+              <span className="emoji-name">{name}</span>
+            </div>
+          );
         })}
       </div>
     </div>