From 6e4e4ea8c0fec522127996f397c2f34cf95efd05 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 15 Jan 2026 18:42:46 +0000
Subject: [PATCH] Improve reaction badge sizing and spacing

- Increase custom emoji size from size-3 (12px) to size-3.5 (14px)
- Increase gap between emoji and count from gap-1 to gap-1.5
- Add object-contain to custom emoji images for proper aspect ratio
- Add leading-none to unicode emoji for consistent vertical alignment
- Results in better visual balance between custom and unicode emoji
---
 src/components/chat/MessageReactions.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/chat/MessageReactions.tsx b/src/components/chat/MessageReactions.tsx
index 27b4d41..f52b54a 100644
--- a/src/components/chat/MessageReactions.tsx
+++ b/src/components/chat/MessageReactions.tsx
@@ -173,17 +173,17 @@ function ReactionBadge({ reaction }: { reaction: ReactionSummary }) {
 
   return (
     <span
-      className="inline-flex items-center gap-1 text-[10px] leading-tight"
+      className="inline-flex items-center gap-1.5 text-[10px] leading-tight"
       title={tooltip}
     >
       {reaction.customEmoji ? (
         <img
           src={reaction.customEmoji.url}
           alt={`:${reaction.customEmoji.shortcode}:`}
-          className="size-3 inline-block"
+          className="size-3.5 inline-block object-contain"
         />
       ) : (
-        <span className="text-xs">{reaction.emoji}</span>
+        <span className="text-xs leading-none">{reaction.emoji}</span>
       )}
       <span
         className={cn(