From 7a250f41ac0b50e11be87fc5104fe8cd6696c6cd Mon Sep 17 00:00:00 2001
From: alunturner <56027671+alunturner@users.noreply.github.com>
Date: Tue, 4 Apr 2023 14:52:57 +0100
Subject: [PATCH] Update rte autocomplete styling (#10503)

* amend className to reflect usage
* move new class into file used by Send/Edit composers
* add border styling to autocomplete
---
 .../wysiwyg_composer/_SendWysiwygComposer.pcss      |  7 -------
 .../rooms/wysiwyg_composer/components/_Editor.pcss  | 13 +++++++++++++
 .../components/WysiwygAutocomplete.tsx              |  2 +-
 3 files changed, 14 insertions(+), 8 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..b311c3c45ba 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -146,3 +146,16 @@ limitations under the License.
         color: $tertiary-content;
     }
 }
+
+.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 {
+        border: 1px solid $quinary-content;
+        border-radius: 8px;
+    }
+}
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)}