From 1473f4f88c034c5f86aa50b1a1016d0f27342bdd Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sat, 21 Mar 2026 18:21:30 +0100
Subject: [PATCH] fix: emoji reaction picker no longer overflows viewport on
 bottom messages

---
 packages/web/src/components/chat/Message.tsx | 46 ++++++++++++--------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/packages/web/src/components/chat/Message.tsx b/packages/web/src/components/chat/Message.tsx
index 4965bb5d..a8a309cf 100644
--- a/packages/web/src/components/chat/Message.tsx
+++ b/packages/web/src/components/chat/Message.tsx
@@ -401,24 +401,34 @@ export function Message({ message, isCompact, isFirstInGroup, previousMessageId
       </div>
 
       {/* Reaction emoji picker */}
-      {showReactionPicker && canAddReactions && reactionPickerBtnRef.current && createPortal(
-        <div
-          ref={reactionPickerRef}
-          className="fixed z-[300] animate-slide-up"
-          style={{
-            top: reactionPickerBtnRef.current.getBoundingClientRect().bottom + 8,
-            left: Math.min(
-              reactionPickerBtnRef.current.getBoundingClientRect().left,
-              window.innerWidth - 360,
-            ),
-          }}
-        >
-          <div className="glass rounded-xl overflow-hidden">
-            <EmojiPicker onEmojiSelect={handleReactionEmojiSelect} />
-          </div>
-        </div>,
-        document.body,
-      )}
+      {showReactionPicker && canAddReactions && reactionPickerBtnRef.current && (() => {
+        const PICKER_HEIGHT = 400;
+        const PICKER_WIDTH = 360;
+        const MARGIN = 8;
+        const btnRect = reactionPickerBtnRef.current!.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - btnRect.bottom;
+        const spaceAbove = btnRect.top;
+        const flipAbove = spaceBelow < (PICKER_HEIGHT + MARGIN) && spaceAbove > spaceBelow;
+        const top = flipAbove
+          ? Math.max(MARGIN, btnRect.top - PICKER_HEIGHT - MARGIN)
+          : btnRect.bottom + MARGIN;
+        const left = Math.min(
+          Math.max(MARGIN, btnRect.left),
+          window.innerWidth - PICKER_WIDTH - MARGIN,
+        );
+        return createPortal(
+          <div
+            ref={reactionPickerRef}
+            className={`fixed z-[300] ${flipAbove ? 'animate-slide-down' : 'animate-slide-up'}`}
+            style={{ top, left }}
+          >
+            <div className="glass rounded-xl overflow-hidden">
+              <EmojiPicker onEmojiSelect={handleReactionEmojiSelect} />
+            </div>
+          </div>,
+          document.body,
+        );
+      })()}
 
       {/* Action buttons on hover */}
       {(isHovered || showReactionPicker || confirmingDelete) && !isEditing && (