fix(angular): Mention autocomplete can overflow (#266)

### 🎯 Goal Angular-only change: the mention autocomplete menu could overflow before ### 🛠 Implementation details _Provide a description of the implementation_ ### 🎨 UI Changes _Add relevant screenshots_ Make sure to test with both Angular and React (with both `MessageList` and `VirtualizedMessageList` components) SDKs
GetStream · Feb 6, 2024 · 2218812 · 2218812
1 parent e786174
commit 2218812
Showing 1 changed file with 16 additions and 8 deletions.
diff --git a/src/v2/styles/Autocomplete/Autocomplete-layout.scss b/src/v2/styles/Autocomplete/Autocomplete-layout.scss
@@ -2,13 +2,21 @@
 
 // Class defined by Angular mentions
 // !important necessary to override library defined styles
-.mention-menu {
-  padding: var(--str-chat__spacing-2) 0 !important;
-  margin: 0 !important;
-  min-width: 50%;
+.str-chat__message-textarea-angular-host {
+  position: relative;
 
-  .mention-item {
-    padding: 0 !important;
+  mention-list {
+    width: 100%;
+  }
+
+  .mention-menu {
+    padding: var(--str-chat__spacing-2) 0 !important;
+    margin: 0 !important;
+    max-width: 100%;
+
+    .mention-item {
+      padding: 0 !important;
+    }
   }
 }
 
@@ -66,7 +74,7 @@
 }
 
 .str-chat__message-textarea-angular-host--autocomplete-hidden {
-  mention-list  {
+  mention-list {
     display: none;
   }
-}
+}