Merge branch 'chats-scrollbars' into 'develop'

Fix chat overflow-x

See merge request soapbox-pub/soapbox!2285

app/soapbox/components/status-reaction-wrapper.tsx

@@ -105,6 +105,7 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
         ref: setReferenceElement,
       })}
 
+      {visible && (
         <Portal>
           <EmojiSelector
             placement='top-start'
@@ -113,6 +114,7 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
             visible={visible}
           />
         </Portal>
+      )}
     </div>
   );
 };

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}

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,6 +37,8 @@ function ChatMessageReactionWrapper(props: IChatMessageReactionWrapper) {
         onClick: onToggleVisibility,
       })}
 
+      {isOpen && (
+        <Portal>
           <EmojiSelector
             visible={isOpen}
             referenceElement={referenceElement}
@@ -44,6 +47,8 @@ function ChatMessageReactionWrapper(props: IChatMessageReactionWrapper) {
             offset={[-10, 12]}
             all={false}
           />
+        </Portal>
+      )}
     </React.Fragment>
   );
 }