Add optional portal prop to emoji picker

src/screens/Messages/components/MessagesList.tsx

@@ -38,7 +38,6 @@ import {ChatEmptyPill} from '#/components/dms/ChatEmptyPill'
 import {MessageItem} from '#/components/dms/MessageItem'
 import {NewMessagesPill} from '#/components/dms/NewMessagesPill'
 import {Loader} from '#/components/Loader'
-import {Portal} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 import {MessageInputEmbed, useMessageEmbed} from './MessageInputEmbed'
 
@@ -449,15 +448,12 @@ export function MessagesList({
       </Animated.View>
 
       {isWeb && (
-        <Portal>
-          <EmojiPicker
-            pinToTop
-            state={emojiPickerState}
-            close={() =>
-              setEmojiPickerState(prev => ({...prev, isOpen: false}))
-            }
-          />
-        </Portal>
+        <EmojiPicker
+          portal
+          pinToTop
+          state={emojiPickerState}
+          close={() => setEmojiPickerState(prev => ({...prev, isOpen: false}))}
+        />
       )}
 
       {newMessagesPill.show && <NewMessagesPill onPress={scrollToEndOnPress} />}

src/view/com/composer/text-input/web/EmojiPicker.web.tsx

@@ -10,6 +10,7 @@ import {DismissableLayer} from '@radix-ui/react-dismissable-layer'
 
 import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter'
 import {atoms as a} from '#/alf'
+import {Portal} from '#/components/Portal'
 
 const HEIGHT_OFFSET = 40
 const WIDTH_OFFSET = 100
@@ -47,9 +48,14 @@ interface IProps {
    * the target element.
    */
   pinToTop?: boolean
+  /**
+   * If `true`, renders the picker in a portal at the document root. Useful if
+   * the positioning is getting wacky due to other wrapping elements.
+   */
+  portal?: boolean
 }
 
-export function EmojiPicker({state, close, pinToTop}: IProps) {
+export function EmojiPicker({state, close, pinToTop, portal}: IProps) {
   const {height, width} = useWindowDimensions()
 
   const isShiftDown = React.useRef(false)
@@ -124,7 +130,7 @@ export function EmojiPicker({state, close, pinToTop}: IProps) {
     close()
   }
 
-  return (
+  const picker = (
     <TouchableWithoutFeedback
       accessibilityRole="button"
       onPress={onPressBackdrop}
@@ -160,4 +166,5 @@ export function EmojiPicker({state, close, pinToTop}: IProps) {
       </View>
     </TouchableWithoutFeedback>
   )
+  return portal ? <Portal>{picker}</Portal> : picker
 }