From 5e039b96c30efab07f9435b937857e7944ab8e81 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Wed, 20 Mar 2024 12:07:02 +0100
Subject: [PATCH] [Glitch] Fix emoji picker placement on limited-height
 viewports

Port 94f7ae192b8df4f0a8846249016268f914b730bb to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../compose/components/emoji_picker_dropdown.jsx         | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx b/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx
index afe2981d05..c556f15366 100644
--- a/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx
@@ -332,6 +332,7 @@ class EmojiPickerDropdown extends PureComponent {
   state = {
     active: false,
     loading: false,
+    placement: 'bottom',
   };
 
   setRef = (c) => {
@@ -383,10 +384,14 @@ class EmojiPickerDropdown extends PureComponent {
     return this.target;
   };
 
+  handleOverlayEnter = (state) => {
+    this.setState({ placement: state.placement });
+  };
+
   render () {
     const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
     const title = intl.formatMessage(messages.emoji);
-    const { active, loading } = this.state;
+    const { active, loading, placement } = this.state;
 
     return (
       <div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown} ref={this.setTargetRef}>
@@ -399,7 +404,7 @@ class EmojiPickerDropdown extends PureComponent {
           inverted
         />
 
-        <Overlay show={active} placement={'bottom'} target={this.findTarget} popperConfig={{ strategy: 'fixed' }}>
+        <Overlay show={active} placement={placement} flip target={this.findTarget} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>
           {({ props, placement })=> (
             <div {...props} style={{ ...props.style }}>
               <div className={`dropdown-animation ${placement}`}>