From bcb6f80ac3440d2efe0af776f340032400c9fd4d Mon Sep 17 00:00:00 2001
From: KMY <tt@kmycode.net>
Date: Sun, 12 Mar 2023 20:33:23 +0900
Subject: [PATCH] Fix emoji reaction popup position

---
 .../components/emoji_picker_dropdown.jsx      | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx
index 494b8d862..142f7babd 100644
--- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx
+++ b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx
@@ -327,6 +327,7 @@ class EmojiPickerDropdown extends PureComponent {
   state = {
     active: false,
     loading: false,
+    bottom: true,
   };
 
   setRef = (c) => {
@@ -334,6 +335,7 @@ class EmojiPickerDropdown extends PureComponent {
   };
 
   onShowDropdown = () => {
+    this.updateDropdownPosition();
     this.setState({ active: true });
 
     if (!EmojiPicker) {
@@ -354,6 +356,23 @@ class EmojiPickerDropdown extends PureComponent {
     this.setState({ active: false });
   };
 
+  updateDropdownPosition = () => {
+    let bottom = true;
+
+    if (this.target) {
+      const height = window.innerHeight;
+      const rect = this.target.getBoundingClientRect();
+
+      if (height && rect) {
+        bottom = height / 2 > rect.top;
+      }
+    }
+
+    if (this.state.bottom !== bottom) {
+      this.setState({ bottom });
+    }
+  };
+
   onToggle = (e) => {
     if (!this.state.loading && (!e.key || e.key === 'Enter')) {
       if (this.state.active) {
@@ -381,7 +400,7 @@ class EmojiPickerDropdown extends PureComponent {
   render () {
     const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis, button } = this.props;
     const title = intl.formatMessage(messages.emoji);
-    const { active, loading } = this.state;
+    const { active, loading, bottom } = this.state;
 
     return (
       <div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown}>
@@ -393,7 +412,7 @@ class EmojiPickerDropdown extends PureComponent {
           />}
         </div>
 
-        <Overlay show={active} placement={'bottom'} target={this.findTarget} popperConfig={{ strategy: 'fixed' }}>
+        <Overlay show={active} placement={ bottom ? 'bottom' : 'top' } target={this.findTarget} popperConfig={{ strategy: 'fixed' }}>
           {({ props, placement })=> (
             <div {...props} style={{ ...props.style, width: 299 }}>
               <div className={`dropdown-animation ${placement}`}>