From ae606a1db013b1519ab8f065ce166088b39063a7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 13 Feb 2023 12:19:13 -0600
Subject: [PATCH 1/2] StatusReactionWrapper: switch to our Portal component

---
 app/soapbox/components/status-reaction-wrapper.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/soapbox/components/status-reaction-wrapper.tsx b/app/soapbox/components/status-reaction-wrapper.tsx
index c2ce020f9..95323f24d 100644
--- a/app/soapbox/components/status-reaction-wrapper.tsx
+++ b/app/soapbox/components/status-reaction-wrapper.tsx
@@ -1,9 +1,8 @@
-import { Portal } from '@reach/portal';
 import React, { useState, useEffect, useRef } from 'react';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji-reacts';
 import { openModal } from 'soapbox/actions/modals';
-import { EmojiSelector } from 'soapbox/components/ui';
+import { EmojiSelector, Portal } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useOwnAccount, useSoapboxConfig } from 'soapbox/hooks';
 import { isUserTouching } from 'soapbox/is-mobile';
 import { getReactForStatus } from 'soapbox/utils/emoji-reacts';

From 45657c7a2a9aec4fe96ad9b59822550f37375d2b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 13 Feb 2023 13:16:14 -0600
Subject: [PATCH 2/2] EmojiSelector: pass offset as a prop

---
 app/soapbox/components/ui/emoji-selector/emoji-selector.tsx  | 5 ++++-
 .../chat-message-reaction-wrapper.tsx                        | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
index 57d06b251..9bbce36f7 100644
--- a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
+++ b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
@@ -43,6 +43,8 @@ interface IEmojiSelector {
   placement?: Placement
   /** Whether the selector should be visible. */
   visible?: boolean
+  /** X/Y offset of the floating picker. */
+  offset?: [number, number]
   /** Whether to allow any emoji to be chosen. */
   all?: boolean
 }
@@ -54,6 +56,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
   onReact,
   placement = 'top',
   visible = false,
+  offset = [-10, 0],
   all = true,
 }): JSX.Element => {
   const soapboxConfig = useSoapboxConfig();
@@ -80,7 +83,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
       {
         name: 'offset',
         options: {
-          offset: [-10, 12],
+          offset,
         },
       },
     ],
diff --git a/app/soapbox/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx b/app/soapbox/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
index d9403af4a..10ca56b4f 100644
--- a/app/soapbox/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
+++ b/app/soapbox/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
@@ -41,6 +41,7 @@ function ChatMessageReactionWrapper(props: IChatMessageReactionWrapper) {
         referenceElement={referenceElement}
         onReact={handleSelect}
         onClose={() => setIsOpen(false)}
+        offset={[-10, 12]}
         all={false}
       />
     </React.Fragment>