From f110b224e64697d16761aaee44e67f354d3a412f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 15 Jan 2026 18:02:51 +0000
Subject: [PATCH] Fix reaction container to prevent message width expansion

Wrapped reactions in a scrollable container with proper constraints:
- inline-flex: displays inline with message metadata
- max-w-full: prevents expanding beyond message width
- overflow-x-auto: enables horizontal scrolling for many reactions
- hide-scrollbar: hides scrollbar for clean appearance

Messages with many reactions now stay within their width and scroll
horizontally without a visible scrollbar.
---
 src/components/chat/MessageReactions.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/chat/MessageReactions.tsx b/src/components/chat/MessageReactions.tsx
index efb22f8..758fe31 100644
--- a/src/components/chat/MessageReactions.tsx
+++ b/src/components/chat/MessageReactions.tsx
@@ -134,14 +134,14 @@ 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">
       {aggregated.map((reaction) => (
         <ReactionBadge
           key={reaction.customEmoji?.shortcode || reaction.emoji}
           reaction={reaction}
         />
       ))}
-    </>
+    </div>
   );
 }