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

Author: artcodespace

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%;
-    }
-}

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;
+    }
+}

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)}