render @ mention correctly with long title on ConversationListItem

stylesheets/_mentions.scss

@@ -100,9 +100,8 @@
   padding-inline-start: 3px;
   padding-inline-end: 3px;
 
-  position: absolute;
-  left: 50%;
-  margin-inline-start: 30px;
+  position: static;
+  margin-inline-start: 5px;
   top: 2px;
 
   font-weight: 300;

ts/components/ConversationListItem.tsx

@@ -108,28 +108,21 @@ class ConversationListItem extends React.PureComponent<Props> {
     );
   }
 
-  public renderUnread() {
-    const { unreadCount, mentionedUs } = this.props;
+  public renderHeader() {
+    const { unreadCount, mentionedUs, i18n, isMe, lastUpdated } = this.props;
+    const {} = this.props;
 
+    let atSymbol = null;
+    let unreadCountDiv = null;
     if (unreadCount > 0) {
-      const atSymbol = mentionedUs ? <p className="at-symbol">@</p> : null;
-
-      return (
-        <div>
+      atSymbol = mentionedUs ? <p className="at-symbol">@</p> : null;
+      unreadCountDiv = (
         <p className="module-conversation-list-item__unread-count">
           {unreadCount}
         </p>
-          {atSymbol}
-        </div>
       );
     }
 
-    return null;
-  }
-
-  public renderHeader() {
-    const { unreadCount, i18n, isMe, lastUpdated } = this.props;
-
     return (
       <div className="module-conversation-list-item__header">
         <div
@@ -142,7 +135,8 @@ class ConversationListItem extends React.PureComponent<Props> {
         >
           {this.renderUser()}
         </div>
-        {this.renderUnread()}
+        {unreadCountDiv}
+        {atSymbol}
         {
           <div
             className={classNames(