fix: stickers and chat UI fix

components/chat/message-group.tsx

@@ -316,43 +316,53 @@ export function MessageGroup({
             </div>
 
             {m.reactions?.length > 0 && (
-              <button
-                type="button"
-                // ONE control, not one per emoji. Two different jobs depending
-                // on whether you are in the reaction list already: if you have
-                // reacted, this retracts it; if you have not, it opens the
-                // list of who reacted. Per-chip toggling would make "see who
-                // reacted" unreachable for anyone who had.
-                onClick={() => onTrailClick(m)}
-                aria-label={
-                  m.reactions.some((r) => r.mine)
-                    ? "Remove your reaction"
-                    : "See who reacted"
-                }
+              // Aligned like the bubble it belongs to. The gesture wrapper is
+              // full-width, so without this the trail sits at the left edge
+              // while your own bubble is over on the right.
+              <div
                 className={cn(
-                  "-mt-1 inline-flex items-center gap-0.5 rounded-full border bg-background px-1.5 py-0.5 text-xs",
-                  mine ? "self-end mr-1" : "self-start ml-1",
-                  m.reactions.some((r) => r.mine)
-                    ? "border-primary/40 bg-primary/10"
-                    : "border-border",
+                  "flex w-full",
+                  mine ? "justify-end" : "justify-start",
                 )}
               >
-                {m.reactions.slice(0, MAX_TRAIL_EMOJI).map((r) => (
-                  <span key={r.emoji}>{r.emoji}</span>
-                ))}
-                {m.reactions.length > MAX_TRAIL_EMOJI && (
-                  <span className="tabular-nums text-muted-foreground">
-                    +{m.reactions.length - MAX_TRAIL_EMOJI}
-                  </span>
-                )}
-                {/* Total people, not distinct emoji — "😂❤️ 5" reads as five
+                <button
+                  type="button"
+                  // ONE control, not one per emoji. Two different jobs depending
+                  // on whether you are in the reaction list already: if you have
+                  // reacted, this retracts it; if you have not, it opens the
+                  // list of who reacted. Per-chip toggling would make "see who
+                  // reacted" unreachable for anyone who had.
+                  onClick={() => onTrailClick(m)}
+                  aria-label={
+                    m.reactions.some((r) => r.mine)
+                      ? "Remove your reaction"
+                      : "See who reacted"
+                  }
+                  className={cn(
+                    "-mt-1 inline-flex items-center gap-0.5 rounded-full border bg-background px-1.5 py-0.5 text-xs",
+                    mine ? "mr-1" : "ml-1",
+                    m.reactions.some((r) => r.mine)
+                      ? "border-primary/40 bg-primary/10"
+                      : "border-border",
+                  )}
+                >
+                  {m.reactions.slice(0, MAX_TRAIL_EMOJI).map((r) => (
+                    <span key={r.emoji}>{r.emoji}</span>
+                  ))}
+                  {m.reactions.length > MAX_TRAIL_EMOJI && (
+                    <span className="tabular-nums text-muted-foreground">
+                      +{m.reactions.length - MAX_TRAIL_EMOJI}
+                    </span>
+                  )}
+                  {/* Total people, not distinct emoji — "😂❤️ 5" reads as five
                     reactions, which is what it is. */}
-                {totalReactions(m) > 1 && (
-                  <span className="ml-0.5 tabular-nums text-muted-foreground">
-                    {totalReactions(m)}
-                  </span>
-                )}
-              </button>
+                  {totalReactions(m) > 1 && (
+                    <span className="ml-0.5 tabular-nums text-muted-foreground">
+                      {totalReactions(m)}
+                    </span>
+                  )}
+                </button>
+              </div>
             )}
           </MessageGestures>
         ))}