From 4578c635a6f1fd79137797aef640992d294ee8fb Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Fri, 25 Sep 2020 14:13:32 +1000
Subject: [PATCH] render @ mention correctly with long title on
 ConversationListItem

---
 stylesheets/_mentions.scss             |  5 ++---
 ts/components/ConversationListItem.tsx | 30 +++++++++++---------------
 2 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/stylesheets/_mentions.scss b/stylesheets/_mentions.scss
index 04e6d0377..34337564c 100644
--- a/stylesheets/_mentions.scss
+++ b/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;
diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx
index 3bcc26d29..0d2c62451 100644
--- a/ts/components/ConversationListItem.tsx
+++ b/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>
-          <p className="module-conversation-list-item__unread-count">
-            {unreadCount}
-          </p>
-          {atSymbol}
-        </div>
+      atSymbol = mentionedUs ? <p className="at-symbol">@</p> : null;
+      unreadCountDiv = (
+        <p className="module-conversation-list-item__unread-count">
+          {unreadCount}
+        </p>
       );
     }
 
-    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(