From 757af58559be3978246e0586da51bc5439948b30 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 15 Jan 2026 18:19:34 +0000
Subject: [PATCH] Refine reaction badge styling: increase spacing and remove
 bold

- Increase gap between reaction badges from gap-1 to gap-2
- Remove font-semibold from highlighted reaction counts
- Keep text-highlight color for active user's reactions
- Results in more subtle, polished appearance
---
 src/components/chat/MessageReactions.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/chat/MessageReactions.tsx b/src/components/chat/MessageReactions.tsx
index 489abfd..27b4d41 100644
--- a/src/components/chat/MessageReactions.tsx
+++ b/src/components/chat/MessageReactions.tsx
@@ -136,7 +136,7 @@ export function MessageReactions({ messageId, relays }: MessageReactionsProps) {
   if (aggregated.length === 0) return null;
 
   return (
-    <div className="inline-flex gap-1 max-w-full overflow-x-auto hide-scrollbar">
+    <div className="inline-flex gap-2 max-w-full overflow-x-auto hide-scrollbar">
       {aggregated.map((reaction) => (
         <ReactionBadge
           key={reaction.customEmoji?.shortcode || reaction.emoji}
@@ -187,9 +187,7 @@ function ReactionBadge({ reaction }: { reaction: ReactionSummary }) {
       )}
       <span
         className={cn(
-          hasUserReacted
-            ? "text-highlight font-semibold"
-            : "text-muted-foreground",
+          hasUserReacted ? "text-highlight" : "text-muted-foreground",
         )}
       >
         {reaction.count}