Mobile Responsive Message Reactions

[Akash504-ai]

Description

The current message reaction display (the emojis positioned at the bottom of the message bubble) needs refinement for mobile viewports. On smaller screens, reactions can overlap with the message timestamp or extend beyond the bubble container, causing layout issues.

Tasks

• Adjust absolute positioning of the reaction container for screens < 640px
• Implement a maximum width for the reaction pill to prevent overflow
• Ensure the reaction pill has a higher z-index to avoid being hidden by shadows
• Add a slight scale-down effect for emoji text on mobile (e.g., text-[10px])

Expected Behavior

Reactions should sit neatly at the corner of the message bubble without overlapping text, timestamps, or status ticks.