From 114b24b68043be16c4b44d6f03b76c6de63824ee Mon Sep 17 00:00:00 2001
From: prxt6529 <117092621+prxt6529@users.noreply.github.com>
Date: Thu, 5 Feb 2026 15:59:42 +0200
Subject: [PATCH 1/2] Fix mobile emoji picker scrolling and close actions
 dialog

Signed-off-by: prxt6529 <117092621+prxt6529@users.noreply.github.com>
---
 components/waves/drops/WaveDropActionsAddReaction.tsx | 10 ++++++++--
 components/waves/drops/WaveDropMobileMenu.tsx         |  1 +
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/waves/drops/WaveDropActionsAddReaction.tsx b/components/waves/drops/WaveDropActionsAddReaction.tsx
index 9cfbc990a1..2cc9d30c87 100644
--- a/components/waves/drops/WaveDropActionsAddReaction.tsx
+++ b/components/waves/drops/WaveDropActionsAddReaction.tsx
@@ -25,8 +25,9 @@ import {
 const WaveDropActionsAddReaction: React.FC<{
   readonly drop: ExtendedDrop;
   readonly isMobile?: boolean | undefined;
+  readonly onOpenPicker?: (() => void) | undefined;
   readonly onAddReaction?: (() => void) | undefined;
-}> = ({ drop, isMobile = false, onAddReaction }) => {
+}> = ({ drop, isMobile = false, onOpenPicker, onAddReaction }) => {
   const isTemporaryDrop = drop.id.startsWith("temp-");
   const canReact = !isTemporaryDrop;
   const [showPicker, setShowPicker] = useState(false);
@@ -181,6 +182,11 @@ const WaveDropActionsAddReaction: React.FC<{
 
   const onReact = () => {
     if (!canReact) return;
+
+    if (isMobile && !showPicker) {
+      onOpenPicker?.();
+    }
+
     setShowPicker(!showPicker);
   };
 
@@ -300,7 +306,7 @@ const WaveDropActionsAddReaction: React.FC<{
           isOpen={showPicker}
           onClose={() => setShowPicker(false)}
         >
-          <div className="tw-flex tw-size-full tw-items-center tw-justify-center">
+          <div className="tw-flex tw-size-full tw-justify-center tw-overflow-y-auto">
             <Picker
               theme="dark"
               data={data}
diff --git a/components/waves/drops/WaveDropMobileMenu.tsx b/components/waves/drops/WaveDropMobileMenu.tsx
index d8e7d170d1..777e83d3ae 100644
--- a/components/waves/drops/WaveDropMobileMenu.tsx
+++ b/components/waves/drops/WaveDropMobileMenu.tsx
@@ -158,6 +158,7 @@ const WaveDropMobileMenu: FC<WaveDropMobileMenuProps> = ({
         <WaveDropActionsAddReaction
           drop={extendedDrop}
           isMobile={true}
+          onOpenPicker={closeMenu}
           onAddReaction={onAddReaction}
         />
         {showReplyAndQuote && (

From df8616239e5cfc70634cb7ee43a83a292ecc071e Mon Sep 17 00:00:00 2001
From: prxt6529 <117092621+prxt6529@users.noreply.github.com>
Date: Thu, 5 Feb 2026 17:31:35 +0200
Subject: [PATCH 2/2] Fix mobile reaction picker closing when actions menu
 unmounts

Signed-off-by: prxt6529 <117092621+prxt6529@users.noreply.github.com>
---
 .../drops/WaveDropActionsAddReaction.tsx      | 24 ++++++++--
 components/waves/drops/WaveDropMobileMenu.tsx | 44 +++++++++++++------
 2 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/components/waves/drops/WaveDropActionsAddReaction.tsx b/components/waves/drops/WaveDropActionsAddReaction.tsx
index 2cc9d30c87..b54dea88bb 100644
--- a/components/waves/drops/WaveDropActionsAddReaction.tsx
+++ b/components/waves/drops/WaveDropActionsAddReaction.tsx
@@ -26,8 +26,17 @@ const WaveDropActionsAddReaction: React.FC<{
   readonly drop: ExtendedDrop;
   readonly isMobile?: boolean | undefined;
   readonly onOpenPicker?: (() => void) | undefined;
+  readonly externalOpenSignal?: number | undefined;
+  readonly hideTrigger?: boolean | undefined;
   readonly onAddReaction?: (() => void) | undefined;
-}> = ({ drop, isMobile = false, onOpenPicker, onAddReaction }) => {
+}> = ({
+  drop,
+  isMobile = false,
+  onOpenPicker,
+  externalOpenSignal,
+  hideTrigger = false,
+  onAddReaction,
+}) => {
   const isTemporaryDrop = drop.id.startsWith("temp-");
   const canReact = !isTemporaryDrop;
   const [showPicker, setShowPicker] = useState(false);
@@ -149,6 +158,14 @@ const WaveDropActionsAddReaction: React.FC<{
     }
   };
 
+  useEffect(() => {
+    if (!isMobile || externalOpenSignal === undefined) {
+      return;
+    }
+
+    setShowPicker(true);
+  }, [externalOpenSignal, isMobile]);
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       const target = event.target as Node;
@@ -183,8 +200,9 @@ const WaveDropActionsAddReaction: React.FC<{
   const onReact = () => {
     if (!canReact) return;
 
-    if (isMobile && !showPicker) {
+    if (isMobile && !showPicker && onOpenPicker) {
       onOpenPicker?.();
+      return;
     }
 
     setShowPicker(!showPicker);
@@ -277,7 +295,7 @@ const WaveDropActionsAddReaction: React.FC<{
 
   return (
     <>
-      {isMobile ? mobileContent : desktopContent}
+      {!hideTrigger && (isMobile ? mobileContent : desktopContent)}
       {/* Desktop Picker */}
       {!isMobile &&
         showPicker &&
diff --git a/components/waves/drops/WaveDropMobileMenu.tsx b/components/waves/drops/WaveDropMobileMenu.tsx
index 777e83d3ae..caf7e5b034 100644
--- a/components/waves/drops/WaveDropMobileMenu.tsx
+++ b/components/waves/drops/WaveDropMobileMenu.tsx
@@ -66,6 +66,7 @@ const WaveDropMobileMenu: FC<WaveDropMobileMenuProps> = ({
   );
 
   const [copied, setCopied] = useState(false);
+  const [emojiPickerOpenSignal, setEmojiPickerOpenSignal] = useState(0);
 
   const copyToClipboard = () => {
     if (longPressTriggered) return;
@@ -141,13 +142,19 @@ const WaveDropMobileMenu: FC<WaveDropMobileMenuProps> = ({
 
   const closeMenu = () => setOpen(false);
 
+  const openEmojiPicker = () => {
+    setOpen(false);
+    setEmojiPickerOpenSignal((current) => current + 1);
+  };
+
   return createPortal(
-    <CommonDropdownItemsMobileWrapper isOpen={isOpen} setOpen={setOpen}>
-      <div
-        className={`tw-grid tw-grid-cols-1 tw-gap-y-2 ${
-          longPressTriggered && "tw-select-none"
-        }`}
-      >
+    <>
+      <CommonDropdownItemsMobileWrapper isOpen={isOpen} setOpen={setOpen}>
+        <div
+          className={`tw-grid tw-grid-cols-1 tw-gap-y-2 ${
+            longPressTriggered && "tw-select-none"
+          }`}
+        >
         {showOptions && (
           <WaveDropActionsToggleLinkPreview
             drop={extendedDrop}
@@ -155,12 +162,12 @@ const WaveDropMobileMenu: FC<WaveDropMobileMenuProps> = ({
             onToggle={closeMenu}
           />
         )}
-        <WaveDropActionsAddReaction
-          drop={extendedDrop}
-          isMobile={true}
-          onOpenPicker={closeMenu}
-          onAddReaction={onAddReaction}
-        />
+          <WaveDropActionsAddReaction
+            drop={extendedDrop}
+            isMobile={true}
+            onOpenPicker={openEmojiPicker}
+            onAddReaction={onAddReaction}
+          />
         {showReplyAndQuote && (
           <>
             <button
@@ -308,8 +315,17 @@ const WaveDropMobileMenu: FC<WaveDropMobileMenuProps> = ({
         {showOptions && (
           <WaveDropMobileMenuDelete drop={drop} onDropDeleted={closeMenu} />
         )}
-      </div>
-    </CommonDropdownItemsMobileWrapper>,
+        </div>
+      </CommonDropdownItemsMobileWrapper>
+
+      <WaveDropActionsAddReaction
+        drop={extendedDrop}
+        isMobile={true}
+        hideTrigger={true}
+        externalOpenSignal={emojiPickerOpenSignal}
+        onAddReaction={onAddReaction}
+      />
+    </>,
     document.body
   );
 };