From ec2235011f48affeb4066b791aa6de349a36531a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 14 Feb 2023 11:18:20 -0600
Subject: [PATCH 1/2] ChatMessageReactionWrapper: put EmojiSelector in a portal
 to avoid overflow-x issues

---
 .../ui/emoji-selector/emoji-selector.tsx      |  2 +-
 .../chat-message-reaction-wrapper.tsx         | 21 +++++++++++--------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
index 9bbce36f7..7fb7418e7 100644
--- a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
+++ b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
@@ -113,7 +113,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
 
   return (
     <div
-      className={clsx('z-50 transition-opacity duration-100', {
+      className={clsx('z-[101] transition-opacity duration-100', {
         'opacity-0 pointer-events-none': !visible,
       })}
       ref={setPopperElement}
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 10ca56b4f..ccfb16d81 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
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 
-import EmojiSelector from '../../../../components/ui/emoji-selector/emoji-selector';
+import { Portal } from 'soapbox/components/ui';
+import EmojiSelector from 'soapbox/components/ui/emoji-selector/emoji-selector';
 
 interface IChatMessageReactionWrapper {
   onOpen(isOpen: boolean): void
@@ -36,14 +37,16 @@ function ChatMessageReactionWrapper(props: IChatMessageReactionWrapper) {
         onClick: onToggleVisibility,
       })}
 
-      <EmojiSelector
-        visible={isOpen}
-        referenceElement={referenceElement}
-        onReact={handleSelect}
-        onClose={() => setIsOpen(false)}
-        offset={[-10, 12]}
-        all={false}
-      />
+      <Portal>
+        <EmojiSelector
+          visible={isOpen}
+          referenceElement={referenceElement}
+          onReact={handleSelect}
+          onClose={() => setIsOpen(false)}
+          offset={[-10, 12]}
+          all={false}
+        />
+      </Portal>
     </React.Fragment>
   );
 }

From 0aeeeb1dc4899cc3f4c34a5799d8af0c41aa8b17 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 14 Feb 2023 11:20:25 -0600
Subject: [PATCH 2/2] Performance: hide EmojiSelector until portaled

---
 .../components/status-reaction-wrapper.tsx    | 18 ++++++++-------
 .../chat-message-reaction-wrapper.tsx         | 22 ++++++++++---------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/components/status-reaction-wrapper.tsx b/app/soapbox/components/status-reaction-wrapper.tsx
index 95323f24d..47677e157 100644
--- a/app/soapbox/components/status-reaction-wrapper.tsx
+++ b/app/soapbox/components/status-reaction-wrapper.tsx
@@ -105,14 +105,16 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
         ref: setReferenceElement,
       })}
 
-      <Portal>
-        <EmojiSelector
-          placement='top-start'
-          referenceElement={referenceElement}
-          onReact={handleReact}
-          visible={visible}
-        />
-      </Portal>
+      {visible && (
+        <Portal>
+          <EmojiSelector
+            placement='top-start'
+            referenceElement={referenceElement}
+            onReact={handleReact}
+            visible={visible}
+          />
+        </Portal>
+      )}
     </div>
   );
 };
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 ccfb16d81..03cbf23a7 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
@@ -37,16 +37,18 @@ function ChatMessageReactionWrapper(props: IChatMessageReactionWrapper) {
         onClick: onToggleVisibility,
       })}
 
-      <Portal>
-        <EmojiSelector
-          visible={isOpen}
-          referenceElement={referenceElement}
-          onReact={handleSelect}
-          onClose={() => setIsOpen(false)}
-          offset={[-10, 12]}
-          all={false}
-        />
-      </Portal>
+      {isOpen && (
+        <Portal>
+          <EmojiSelector
+            visible={isOpen}
+            referenceElement={referenceElement}
+            onReact={handleSelect}
+            onClose={() => setIsOpen(false)}
+            offset={[-10, 12]}
+            all={false}
+          />
+        </Portal>
+      )}
     </React.Fragment>
   );
 }