From f10ded247c473961d0f02f20ceb6848c5d740132 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 16 Sep 2022 09:46:18 +0100
Subject: [PATCH 1/2] Make autocomplete pop-up wider in thread view

---
 res/css/views/right_panel/_ThreadPanel.pcss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss
index e0564c67808..9a66b93a963 100644
--- a/res/css/views/right_panel/_ThreadPanel.pcss
+++ b/res/css/views/right_panel/_ThreadPanel.pcss
@@ -84,6 +84,11 @@ limitations under the License.
         .mx_MessageComposer_sendMessage {
             margin-right: 0;
         }
+
+        .mx_Autocomplete {
+            // Make use of the space above the composer buttons too
+            width: calc(100% + 108px);
+        }
     }
 
     .mx_RoomView_messagePanel { /* To avoid the rule from being applied to .mx_ThreadPanel_empty */

From 3b2f6627453d76aa97db96dae8ebddf99bdd4bdf Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 16 Sep 2022 09:53:15 +0100
Subject: [PATCH 2/2] Handle non-narrow mode too

---
 res/css/views/right_panel/_ThreadPanel.pcss | 5 ++++-
 src/components/structures/ThreadView.tsx    | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss
index 9a66b93a963..a79cddfc825 100644
--- a/res/css/views/right_panel/_ThreadPanel.pcss
+++ b/res/css/views/right_panel/_ThreadPanel.pcss
@@ -85,8 +85,11 @@ limitations under the License.
             margin-right: 0;
         }
 
+        // Make use of the space above the composer buttons too
         .mx_Autocomplete {
-            // Make use of the space above the composer buttons too
+            width: calc(100% + 140px);
+        }
+        &.mx_ThreadView_narrow .mx_Autocomplete {
             width: calc(100% + 108px);
         }
     }
diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx
index f516062fa19..a6b18a32f62 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()}