MM-51463 Only use RhsSuggestionList for RHS advanced text editor (#24175)

* Only use RhsSuggestionList for RHS advanced text editor

- Prevents issues with suggestion list growing downwards on the post editor on small screen sizes

* Makes RhsSuggestionList grow using different breakpoints for mobile

- Allows RhsSuggestionList to flip directions at smaller breakpoints than desktop
- Adds new Constant MOBILE_SUGGESTION_LIST_SPACE_RHS

---------

Co-authored-by: Nathan Geist <ngeist@spiria.com>
Co-authored-by: M-ZubairAhmed <m-zubairahmed@protonmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx

@@ -26,6 +26,7 @@ import MessageSubmitError from 'components/message_submit_error';
 import MsgTyping from 'components/msg_typing';
 import OverlayTrigger from 'components/overlay_trigger';
 import RhsSuggestionList from 'components/suggestion/rhs_suggestion_list';
+import SuggestionList from 'components/suggestion/suggestion_list';
 import Textbox from 'components/textbox';
 import type {TextboxElement} from 'components/textbox';
 import type TextboxClass from 'components/textbox/textbox';
@@ -684,7 +685,7 @@ const AdvanceTextEditor = ({
                         {labels}
                         <Textbox
                             hasLabels={Boolean(labels)}
-                            suggestionList={RhsSuggestionList}
+                            suggestionList={location === Locations.RHS_COMMENT ? RhsSuggestionList : SuggestionList}
                             onChange={handleChange}
                             onKeyPress={postMsgKeyPress}
                             onKeyDown={handleKeyDown}

webapp/channels/src/components/suggestion/rhs_suggestion_list.tsx

@@ -2,6 +2,9 @@
 // See LICENSE.txt for license information.
 
 import React, {useEffect, useState} from 'react';
+import {useSelector} from 'react-redux';
+
+import {getIsMobileView} from 'selectors/views/browser';
 
 import Constants from 'utils/constants';
 
@@ -14,13 +17,14 @@ type Props = React.ComponentProps<typeof SuggestionList> & {
 
 export default function RhsSuggestionList(props: Props): JSX.Element {
     const [position, setPosition] = useState<Props['position']>('top');
+    const isMobile = useSelector(getIsMobileView);
 
     useEffect(() => {
         const input = props.inputRef.current;
-
         if (input && props.open) {
             const inputTop = input.getBoundingClientRect().top ?? 0;
-            const newPosition = (inputTop < Constants.SUGGESTION_LIST_SPACE_RHS) ? 'bottom' : 'top';
+            const requiredSpace = isMobile ? Constants.MOBILE_SUGGESTION_LIST_SPACE_RHS : Constants.SUGGESTION_LIST_SPACE_RHS;
+            const newPosition = (inputTop < requiredSpace) ? 'bottom' : 'top';
 
             if (newPosition !== position) {
                 // This potentially causes a second render when the list position changes, but that's better
@@ -28,7 +32,7 @@ export default function RhsSuggestionList(props: Props): JSX.Element {
                 setPosition(newPosition);
             }
         }
-    }, [position, props.inputRef, props.open]);
+    }, [position, props.inputRef, props.open, isMobile]);
 
     return (
         <SuggestionList

webapp/channels/src/utils/constants.tsx

@@ -1551,6 +1551,7 @@ export const Constants = {
     SUGGESTION_LIST_MAXHEIGHT: 292,
     SUGGESTION_LIST_MAXWIDTH: 496,
     SUGGESTION_LIST_SPACE_RHS: 420,
+    MOBILE_SUGGESTION_LIST_SPACE_RHS: 220,
     SUGGESTION_LIST_MODAL_WIDTH: 496,
     MENTION_NAME_PADDING_LEFT: 2.4,
     AVATAR_WIDTH: 24,