fix: emoji styles

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

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>