From f8b132095c5ca918225ff6335e34f8650ceaa271 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 17 Jan 2026 11:56:16 +0000
Subject: [PATCH] style: Change emoji set detail to horizontal row layout

Render emoji shortcodes in a horizontal wrapping flow instead of a
6-column grid. This provides a more compact view with emoji and
shortcode inline together.
---
 .../nostr/kinds/EmojiSetDetailRenderer.tsx          | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/nostr/kinds/EmojiSetDetailRenderer.tsx b/src/components/nostr/kinds/EmojiSetDetailRenderer.tsx
index ecb9204..6ee6391 100644
--- a/src/components/nostr/kinds/EmojiSetDetailRenderer.tsx
+++ b/src/components/nostr/kinds/EmojiSetDetailRenderer.tsx
@@ -23,23 +23,22 @@ export function EmojiSetDetailRenderer({ event }: { event: NostrEvent }) {
         </div>
       ) : (
         <>
-          {/* Emoji grid */}
-          <div className="grid grid-cols-6 gap-2">
+          {/* Emoji list - horizontal flow with wrapping */}
+          <div className="flex flex-wrap gap-2">
             {emojis.map((emoji) => (
               <div
                 key={emoji.shortcode}
-                className="flex flex-col items-center gap-2 p-3 rounded-lg bg-muted/30"
-                title={`:${emoji.shortcode}:`}
+                className="inline-flex items-center gap-1.5 px-2 py-1 rounded bg-muted/30"
               >
                 <Emoji
                   source="custom"
                   value={emoji.url}
                   shortcode={emoji.shortcode}
-                  size="lg"
+                  size="md"
                 />
-                <div className="text-xs text-muted-foreground font-mono truncate max-w-full px-1">
+                <span className="text-sm font-mono text-muted-foreground">
                   :{emoji.shortcode}:
-                </div>
+                </span>
               </div>
             ))}
           </div>