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 ? ( -
+