fix: emoji reaction picker no longer overflows viewport on bottom messages

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(
+      {showReactionPicker && canAddReactions && reactionPickerBtnRef.current && (() => {
-        <div
+        const PICKER_HEIGHT = 400;
-          ref={reactionPickerRef}
+        const PICKER_WIDTH = 360;
-          className="fixed z-[300] animate-slide-up"
+        const MARGIN = 8;
-          style={{
+        const btnRect = reactionPickerBtnRef.current!.getBoundingClientRect();
-            top: reactionPickerBtnRef.current.getBoundingClientRect().bottom + 8,
+        const spaceBelow = window.innerHeight - btnRect.bottom;
-            left: Math.min(
+        const spaceAbove = btnRect.top;
-              reactionPickerBtnRef.current.getBoundingClientRect().left,
+        const flipAbove = spaceBelow < (PICKER_HEIGHT + MARGIN) && spaceAbove > spaceBelow;
-              window.innerWidth - 360,
+        const top = flipAbove
-            ),
+          ? Math.max(MARGIN, btnRect.top - PICKER_HEIGHT - MARGIN)
-          }}
+          : btnRect.bottom + MARGIN;
-        >
+        const left = Math.min(
-          <div className="glass rounded-xl overflow-hidden">
+          Math.max(MARGIN, btnRect.left),
-            <EmojiPicker onEmojiSelect={handleReactionEmojiSelect} />
+          window.innerWidth - PICKER_WIDTH - MARGIN,
-          </div>
+        );
-        </div>,
+        return createPortal(
-        document.body,
+          <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 && (