Fix dialog dropdown being cut-off (#30881)

* Fix dialog dropdown being cut-off

* Fix dropdown e2e tests

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/interactive_dialog/interactive_dialog.tsx

@@ -205,6 +205,7 @@ export default class InteractiveDialog extends React.PureComponent<Props, State>
                 backdrop='static'
                 role='none'
                 aria-labelledby='interactiveDialogModalLabel'
+                style={{overflowY: 'hidden'}}
             >
                 <form
                     onSubmit={this.handleSubmit}

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

@@ -80,7 +80,7 @@ export default class ModalSuggestionList extends React.PureComponent<Props, Stat
     onModalScroll = (e: Event) => {
         const eventTarget = e.target as HTMLElement;
         if (this.state.scroll !== eventTarget.scrollTop &&
-            this.latestHeight !== 0) {
+            this.props.open) {
             this.setState({scroll: eventTarget.scrollTop});
         }
     };
@@ -132,7 +132,7 @@ export default class ModalSuggestionList extends React.PureComponent<Props, Stat
             return 0;
         }
 
-        const listElement = this.suggestionList?.current?.getContent()?.[0];
+        const listElement = this.suggestionList?.current?.getContent();
         if (!listElement) {
             return 0;
         }
@@ -180,7 +180,7 @@ export default class ModalSuggestionList extends React.PureComponent<Props, Stat
             return;
         }
 
-        const modalBodyContainer = this.container.current.closest('.modal-body');
+        const modalBodyContainer = this.container.current.closest('.modal-content');
         const modalBounds = modalBodyContainer?.getBoundingClientRect();
 
         if (modalBounds) {
@@ -200,11 +200,13 @@ export default class ModalSuggestionList extends React.PureComponent<Props, Stat
         let position = {};
         if (this.state.position === 'top') {
             position = {bottom: this.state.modalBounds.bottom - this.state.inputBounds.top};
+        } else {
+            position = {top: this.state.inputBounds.bottom - this.state.modalBounds.top};
         }
 
         return (
             <div
-                style={{position: 'absolute', zIndex: 101, width: this.state.inputBounds.width, ...position}}
+                style={{position: 'fixed', zIndex: 101, width: this.state.inputBounds.width, ...position}}
                 ref={this.container}
             >
                 <SuggestionList