From 009d6136f0139377ab3cf6cda8983b18d1c29f36 Mon Sep 17 00:00:00 2001
From: Tanmay Vardhaman Thole <72058456+tanmaythole@users.noreply.github.com>
Date: Thu, 26 Oct 2023 12:24:06 +0530
Subject: [PATCH] [MM-54118] Special mentions (`@here`, `@channel`) are not
 formatted correctly in the RHS (#24800)

---
 .../__snapshots__/at_mention_suggestion.test.tsx.snap    | 8 ++++++--
 .../at_mention_provider/at_mention_suggestion.tsx        | 4 ++--
 .../src/components/suggestion/rhs_suggestion_list.tsx    | 2 +-
 .../channels/src/sass/components/_suggestion-list.scss   | 9 ++++++---
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/webapp/channels/src/components/suggestion/at_mention_provider/__snapshots__/at_mention_suggestion.test.tsx.snap b/webapp/channels/src/components/suggestion/at_mention_provider/__snapshots__/at_mention_suggestion.test.tsx.snap
index 8b794b1fdb..574a3bee61 100644
--- a/webapp/channels/src/components/suggestion/at_mention_provider/__snapshots__/at_mention_suggestion.test.tsx.snap
+++ b/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"
diff --git a/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.tsx b/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.tsx
index 8694684270..52dbd84517 100644
--- a/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.tsx
+++ b/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 = (
diff --git a/webapp/channels/src/components/suggestion/rhs_suggestion_list.tsx b/webapp/channels/src/components/suggestion/rhs_suggestion_list.tsx
index 6e8669f200..d064095aaf 100644
--- a/webapp/channels/src/components/suggestion/rhs_suggestion_list.tsx
+++ b/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
diff --git a/webapp/channels/src/sass/components/_suggestion-list.scss b/webapp/channels/src/sass/components/_suggestion-list.scss
index cd85b73787..ece8545c8c 100644
--- a/webapp/channels/src/sass/components/_suggestion-list.scss
+++ b/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 {