Make autocomplete pop-up wider in thread view (#9289)

* Make autocomplete pop-up wider in thread view

* Handle non-narrow mode too

res/css/views/right_panel/_ThreadPanel.pcss

@@ -84,6 +84,14 @@ limitations under the License.
         .mx_MessageComposer_sendMessage {
             margin-right: 0;
         }
+
+        // Make use of the space above the composer buttons too
+        .mx_Autocomplete {
+            width: calc(100% + 140px);
+        }
+        &.mx_ThreadView_narrow .mx_Autocomplete {
+            width: calc(100% + 108px);
+        }
     }
 
     .mx_RoomView_messagePanel { /* To avoid the rule from being applied to .mx_ThreadPanel_empty */

src/components/structures/ThreadView.tsx

@@ -22,6 +22,7 @@ import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window';
 import { Direction } from 'matrix-js-sdk/src/models/event-timeline';
 import { IRelationsRequestOpts } from 'matrix-js-sdk/src/@types/requests';
 import { logger } from 'matrix-js-sdk/src/logger';
+import classNames from 'classnames';
 
 import BaseCard from "../views/right_panel/BaseCard";
 import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
@@ -366,7 +367,9 @@ export default class ThreadView extends React.Component<IProps, IState> {
                 narrow: this.state.narrow,
             }}>
                 <BaseCard
-                    className="mx_ThreadView mx_ThreadPanel"
+                    className={classNames("mx_ThreadView mx_ThreadPanel", {
+                        mx_ThreadView_narrow: this.state.narrow,
+                    })}
                     onClose={this.props.onClose}
                     withoutScrollContainer={true}
                     header={this.renderThreadViewHeader()}