Add the single-line prop to StatusContent and use it for chat list items

src/components/chat_list_item/chat_list_item.scss

@@ -43,6 +43,7 @@
     white-space: nowrap;
     overflow: hidden;
     flex-shrink: 1;
+    line-height: 1.4em;
   }
 
   .chat-preview {
@@ -51,10 +52,9 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     margin: 0.35em 0;
-    height: 1.2em;
-    line-height: 1.2em;
     color: $fallback--text;
     color: var(--faint, $fallback--text);
+    width: 100%;
   }
 
   a {
@@ -83,4 +83,12 @@
       height: 1.4em;
     }
   }
+
+  .time-wrapper {
+    line-height: 1.4em;
+  }
+
+  .single-line {
+    padding-right: 1em;
+  }
 }

src/components/chat_list_item/chat_list_item.vue

@@ -23,7 +23,10 @@
         <span class="heading-right" />
       </div>
       <div class="chat-preview">
-        <StatusContent :status="messageForStatusContent" />
+        <StatusContent
+          :status="messageForStatusContent"
+          :single-line="true"
+        />
         <div
           v-if="chat.unread > 0"
           class="badge badge-notification unread-chat-count"
@@ -32,7 +35,7 @@
         </div>
       </div>
     </div>
-    <div>
+    <div class="time-wrapper">
       <Timeago
         :time="chat.updated_at"
         :auto-update="60"