[MM-54118] Special mentions (@here, @channel) are not formatted correctly in the RHS (#24800)

webapp/channels/src/components/suggestion/at_mention_provider/__snapshots__/at_mention_suggestion.test.tsx.snap

@@ -76,7 +76,9 @@ exports[`at mention suggestion Should display nick name of non signed in user 1`
         >
           @user2
         </span>
-        a b (c)
+        <span>
+          a b (c)
+        </span>
         <Component
           emojiSize={15}
           emojiStyle={
@@ -173,7 +175,9 @@ exports[`at mention suggestion Should not display nick name of the signed in use
         >
           @user
         </span>
-        a b
+        <span>
+          a b
+        </span>
         <FormattedMessage
           defaultMessage="(you)"
           id="suggestion.user.isCurrent"

webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.tsx

@@ -109,10 +109,10 @@ const AtMentionSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<Ite
 
         if (item.isCurrentUser) {
             if (item.first_name || item.last_name) {
-                description = Utils.getFullName(item);
+                description = <span>{Utils.getFullName(item)}</span>;
             }
         } else if (item.first_name || item.last_name || item.nickname) {
-            description = `${Utils.getFullName(item)} ${item.nickname ? `(${item.nickname})` : ''}`.trim();
+            description = <span>{`${Utils.getFullName(item)} ${item.nickname ? `(${item.nickname})` : ''}`.trim()}</span>;
         }
 
         icon = (

webapp/channels/src/components/suggestion/rhs_suggestion_list.tsx

@@ -28,7 +28,7 @@ export default function RhsSuggestionList(props: Props): JSX.Element {
                 setPosition(newPosition);
             }
         }
-    }, [props.inputRef, props.open]);
+    }, [position, props.inputRef, props.open]);
 
     return (
         <SuggestionList

webapp/channels/src/sass/components/_suggestion-list.scss

@@ -205,10 +205,7 @@
 
         .suggestion-list__main {
             display: flex;
-            overflow: hidden;
-            width: 100%;
             color: rgba(var(--center-channel-color-rgb), 1);
-            text-overflow: ellipsis;
             white-space: nowrap;
 
             .suggestion-list__desc {
@@ -216,6 +213,12 @@
                 color: rgba(var(--center-channel-color-rgb), 0.56);
             }
         }
+
+        > span:nth-child(2) {
+            overflow: hidden;
+            width: 100%;
+            text-overflow: ellipsis;
+        }
     }
 
     .suggestion-list__flex {