From 4bfb1e7b2f0ea8197f49c52ec3e7b1c0dc9e53ff Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 16 Sep 2022 10:12:28 +0100
Subject: [PATCH] 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 | 8 ++++++++
 src/components/structures/ThreadView.tsx    | 5 ++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss
index e0564c6780..a79cddfc82 100644
--- a/res/css/views/right_panel/_ThreadPanel.pcss
+++ b/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 */
diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx
index f516062fa1..a6b18a32f6 100644
--- a/src/components/structures/ThreadView.tsx
+++ b/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()}