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

6 files changed, 26 insertions, 6 deletions

diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 6ae7ebc9..012a1b1d 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -53,7 +53,6 @@
     display: flex;
     z-index: 2;
     position: sticky;
-    display: flex;
     overflow: hidden;
   }
 
diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index 3ec59ea2..617054ec 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/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;
+  }
 }
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
index 640426b8..1f8ecdf6 100644
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/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"
diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index cfd1e6d1..c375b10b 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -40,6 +40,8 @@
     white-space: nowrap;
     display: inline;
     word-wrap: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     .emoji {
       width: 14px;
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index dc83d8cb..df095de3 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -14,7 +14,8 @@ const StatusContent = {
     'status',
     'focused',
     'noHeading',
-    'fullContent'
+    'fullContent',
+    'singleLine'
   ],
   data () {
     return {
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 9ca2cf6d..bf8d376e 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -43,6 +43,7 @@
       </a>
       <div
         v-if="!hideSubjectStatus"
+        :class="{ 'single-line': singleLine }"
         class="status-content media-body"
         @click.prevent="linkClicked"
         v-html="postBodyHtml"
@@ -269,6 +270,12 @@ $status-margin: 0.75em;
     h4 {
       margin: 1.1em 0;
     }
+
+    &.single-line {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
   }
 }