From 704a630ac5044fd686354b9e24cf6920639985b5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 8 Jan 2026 15:43:06 +0000
Subject: [PATCH] style(emoji): simplify detail renderer layout

---
 .../nostr/kinds/EmojiSetDetailRenderer.tsx    | 54 +++++++++----------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/components/nostr/kinds/EmojiSetDetailRenderer.tsx b/src/components/nostr/kinds/EmojiSetDetailRenderer.tsx
index 840f46f..4bb80f0 100644
--- a/src/components/nostr/kinds/EmojiSetDetailRenderer.tsx
+++ b/src/components/nostr/kinds/EmojiSetDetailRenderer.tsx
@@ -2,7 +2,6 @@ import { getTagValue } from "applesauce-core/helpers";
 import { getEmojiTags } from "@/lib/emoji-helpers";
 import { CustomEmoji } from "@/components/nostr/CustomEmoji";
 import { NostrEvent } from "@/types/nostr";
-import { Smile } from "lucide-react";
 
 /**
  * Kind 30030 Detail Renderer - Emoji Set (Detail View)
@@ -15,15 +14,7 @@ export function EmojiSetDetailRenderer({ event }: { event: NostrEvent }) {
   return (
     <div className="flex flex-col gap-4 p-4">
       {/* Header */}
-      <div className="flex flex-col gap-1">
-        <h1 className="text-2xl font-bold flex items-center gap-2">
-          <Smile className="size-6 text-muted-foreground" />
-          {identifier}
-        </h1>
-        <p className="text-sm text-muted-foreground">
-          {emojis.length} emoji{emojis.length !== 1 ? "s" : ""} in this set
-        </p>
-      </div>
+      <h1 className="text-2xl font-bold">{identifier}</h1>
 
       {/* Empty state */}
       {emojis.length === 0 ? (
@@ -31,25 +22,32 @@ export function EmojiSetDetailRenderer({ event }: { event: NostrEvent }) {
           This emoji set is empty
         </div>
       ) : (
-        /* Emoji grid */
-        <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 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}:`}
-            >
-              <CustomEmoji
-                shortcode={emoji.shortcode}
-                url={emoji.url}
-                size="lg"
-              />
-              <div className="text-xs text-muted-foreground font-mono truncate max-w-full px-1">
-                :{emoji.shortcode}:
+        <>
+          {/* Emoji grid */}
+          <div className="grid grid-cols-6 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}:`}
+              >
+                <CustomEmoji
+                  shortcode={emoji.shortcode}
+                  url={emoji.url}
+                  size="lg"
+                />
+                <div className="text-xs text-muted-foreground font-mono truncate max-w-full px-1">
+                  :{emoji.shortcode}:
+                </div>
               </div>
-            </div>
-          ))}
-        </div>
+            ))}
+          </div>
+
+          {/* Count */}
+          <p className="text-sm text-muted-foreground">
+            {emojis.length} emoji{emojis.length !== 1 ? "s" : ""} in this set
+          </p>
+        </>
       )}
     </div>
   );