Chats: fix search results position on main pane

app/soapbox/components/account_search.tsx

@@ -14,6 +14,8 @@ interface IAccountSearch {
   onSelected: (accountId: string) => void,
   /** Override the default placeholder of the input. */
   placeholder?: string,
+  /** Position of results relative to the input. */
+  resultsPosition?: 'above' | 'below',
 }
 
 /** Input to search for accounts. */

app/soapbox/components/autosuggest_input.js

@@ -57,12 +57,14 @@ export default class AutosuggestInput extends ImmutablePureComponent {
     searchTokens: PropTypes.arrayOf(PropTypes.string),
     maxLength: PropTypes.number,
     menu: PropTypes.arrayOf(PropTypes.object),
+    resultsPosition: PropTypes.string,
   };
 
   static defaultProps = {
     autoFocus: false,
     autoSelect: true,
     searchTokens: ImmutableList(['@', ':', '#']),
+    resultsPosition: 'below',
   };
 
   getFirstIndex = () => {
@@ -255,7 +257,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
   };
 
   render() {
-    const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu } = this.props;
+    const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, resultsPosition } = this.props;
     const { suggestionsHidden } = this.state;
     const style = { direction: 'ltr' };
 
@@ -293,7 +295,9 @@ export default class AutosuggestInput extends ImmutablePureComponent {
         />
 
         <div className={classNames({
-          'absolute top-full w-full z-50 shadow bg-white dark:bg-slate-800 rounded-lg py-1': true,
+          'absolute w-full z-50 shadow bg-white dark:bg-slate-800 rounded-lg py-1': true,
+          'top-full': resultsPosition === 'below',
+          'bottom-full': resultsPosition === 'above',
           hidden: !visible,
           block: visible,
         })}

app/soapbox/features/chats/components/chat_panes.js

@@ -102,6 +102,7 @@ class ChatPanes extends ImmutablePureComponent {
               <AccountSearch
                 placeholder={intl.formatMessage(messages.searchPlaceholder)}
                 onSelected={this.handleSuggestion}
+                resultsPosition='above'
               />
             </>
           )}