From 29de23bbae85e768b0978179c24e215c8f4418ba Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 19 May 2025 20:03:01 +0300
Subject: Fix emoji reaction expanded picker on web getting squished (#8245)

* ensure expanded emoji picker doesn't get squished

* reset expanded state on close
---
 src/components/dms/EmojiReactionPicker.web.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/components/dms/EmojiReactionPicker.web.tsx b/src/components/dms/EmojiReactionPicker.web.tsx
index cdd3ce414..4dabfc7df 100644
--- a/src/components/dms/EmojiReactionPicker.web.tsx
+++ b/src/components/dms/EmojiReactionPicker.web.tsx
@@ -33,9 +33,7 @@ export function EmojiReactionPicker({
   return (
     <Menu.Root>
       <Menu.Trigger label={_(msg`Add emoji reaction`)}>{children}</Menu.Trigger>
-      <Menu.Outer>
-        <MenuInner message={message} onEmojiSelect={onEmojiSelect} />
-      </Menu.Outer>
+      <MenuInner message={message} onEmojiSelect={onEmojiSelect} />
     </Menu.Root>
   )
 }
@@ -55,6 +53,15 @@ function MenuInner({
 
   const [expanded, setExpanded] = useState(false)
 
+  const [prevOpen, setPrevOpen] = useState(control.isOpen)
+
+  if (control.isOpen !== prevOpen) {
+    setPrevOpen(control.isOpen)
+    if (!control.isOpen) {
+      setExpanded(false)
+    }
+  }
+
   const handleEmojiPickerResponse = (emoji: Emoji) => {
     handleEmojiSelect(emoji.native)
   }
@@ -67,7 +74,16 @@ function MenuInner({
   const limitReacted = hasReachedReactionLimit(message, currentAccount?.did)
 
   return expanded ? (
-    <EmojiPicker onEmojiSelect={handleEmojiPickerResponse} autoFocus={true} />
+    <DropdownMenu.Portal>
+      <DropdownMenu.Content
+        sideOffset={5}
+        collisionPadding={{left: 5, right: 5, bottom: 5}}>
+        <EmojiPicker
+          onEmojiSelect={handleEmojiPickerResponse}
+          autoFocus={true}
+        />
+      </DropdownMenu.Content>
+    </DropdownMenu.Portal>
   ) : (
     <Menu.Outer style={[a.rounded_full]}>
       <View style={[a.flex_row, a.gap_xs]}>
-- 
cgit 1.4.1