emoji: Display status emoji as flexboxes in DM list.

web/styles/left_sidebar.css

@@ -573,6 +573,15 @@ li.top_left_scheduled_messages {
 
 .conversation-partners {
     line-height: 1.25;
+    display: flex;
+    width: 100%;
+    overflow: hidden;
+}
+
+.conversation-partners .status-emoji {
+    /* Prevent status emoji from colliding
+       with unread counts. */
+    margin-right: 3px;
 }
 
 .top_left_all_messages i.fa-align-left {
@@ -598,7 +607,7 @@ li.top_left_scheduled_messages {
     height: 20px;
 }
 
-.conversation-partners,
+.conversation-partners-list,
 .topic-name,
 .stream-name {
     flex: auto;
@@ -610,6 +619,12 @@ li.top_left_scheduled_messages {
     padding: 1px $before_unread_count_padding 1px 0;
 }
 
+.conversation-partners-list {
+    /* Don't allow growth, so that status emoji
+       remain adjacent the username. */
+    flex: 0 1 auto;
+}
+
 .topic-name {
     /* TODO: We should figure out how to remove this without changing the spacing */
     line-height: 1.1;

web/templates/pm_list_item.hbs

@@ -12,7 +12,7 @@
         </div>
 
         <a href='{{url}}' class="conversation-partners">
-            {{recipients}}
+            <span class="conversation-partners-list">{{recipients}}</span>
             {{> status_emoji status_emoji_info}}
         </a>
         <span class="unread_count {{#if is_zero}}zero_count{{/if}}">