From 5719dddf71f423bee0db35cbf44158087e71b501 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 4 Apr 2023 09:08:50 +0100
Subject: [PATCH 1/3] amend className to reflect usage

---
 .../rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx b/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx
index 5ad7b078841..fc1b26fa42e 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx
@@ -119,7 +119,7 @@ const WysiwygAutocomplete = forwardRef(
         }
 
         return room ? (
-            <div className="mx_SendWysiwygComposer_AutoCompleteWrapper" data-testid="autocomplete-wrapper">
+            <div className="mx_WysiwygComposer_AutoCompleteWrapper" data-testid="autocomplete-wrapper">
                 <Autocomplete
                     ref={ref}
                     query={buildQuery(suggestion)}

From d12e047dc15b946f789a54fd2c45c20d9420dd0d Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 4 Apr 2023 09:09:25 +0100
Subject: [PATCH 2/3] move new class into file used by Send/Edit composers

---
 .../views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss | 7 -------
 .../views/rooms/wysiwyg_composer/components/_Editor.pcss   | 7 +++++++
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/res/css/views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss b/res/css/views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss
index 382674f36e7..2eee815c3fc 100644
--- a/res/css/views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss
@@ -84,10 +84,3 @@ limitations under the License.
         border-color: $quaternary-content;
     }
 }
-
-.mx_SendWysiwygComposer_AutoCompleteWrapper {
-    position: relative;
-    > .mx_Autocomplete {
-        min-width: 100%;
-    }
-}
diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index b15d3b74c17..cfafbd99573 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -146,3 +146,10 @@ limitations under the License.
         color: $tertiary-content;
     }
 }
+
+.mx_WysiwygComposer_AutoCompleteWrapper {
+    position: relative;
+    > .mx_Autocomplete {
+        min-width: 100%;
+    }
+}

From 6093b7100d9d954acba8a989c6ca7a2220800f86 Mon Sep 17 00:00:00 2001
From: Alun Turner <alunt@element.io>
Date: Tue, 4 Apr 2023 09:16:18 +0100
Subject: [PATCH 3/3] add border styling to autocomplete

---
 .../views/rooms/wysiwyg_composer/components/_Editor.pcss  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index cfafbd99573..b311c3c45ba 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -149,7 +149,13 @@ limitations under the License.
 
 .mx_WysiwygComposer_AutoCompleteWrapper {
     position: relative;
+
+    /* Due to the fact that editing a message now has a larger amount of grey
+    colour above it (due to the rich text buttons above the composer), we need
+    to give the autocomplete a bit more visual separation by using a border.
+    */
     > .mx_Autocomplete {
-        min-width: 100%;
+        border: 1px solid $quinary-content;
+        border-radius: 8px;
     }
 }