mentions on same line as replies

src/components/status/status.scss

@@ -1,4 +1,3 @@
-
 @import '../../_variables.scss';
 
 $status-margin: 0.75em;
@@ -151,6 +150,11 @@ $status-margin: 0.75em;
     }
   }
 
+  .glued-label {
+    display: inline-flex;
+    white-space: nowrap;
+  }
+
   .timeago {
     margin-right: 0.2em;
   }
@@ -161,8 +165,6 @@ $status-margin: 0.75em;
     font-size: 12px;
     line-height: 160%;
     max-width: 100%;
-    display: flex;
-    flex-wrap: wrap;
     align-items: stretch;
   }
 
@@ -206,6 +208,7 @@ $status-margin: 0.75em;
   & .reply-to {
     white-space: nowrap;
     position: relative;
+    padding-right: 0.25em;
   }
 
   & .reply-to-text {
@@ -215,7 +218,7 @@ $status-margin: 0.75em;
   }
 
   .mentions-line {
-    display: inline-block;
+    display: inline;
   }
 
   .replies {

src/components/status/status.vue

@@ -224,9 +224,13 @@
             <div
               class="heading-reply-row"
               v-if="isReply || hasMentionsLine"
+              >
+              <span
+                class="glued-label"
+                v-if="isReply"
               >
                 <StatusPopover
-                v-if="isReply && !isPreview"
+                   v-if="!isPreview"
                   :status-id="status.parent_visible && status.in_reply_to_status_id"
                   class="reply-to-popover"
                   style="min-width: 0"
@@ -251,12 +255,11 @@
                 </StatusPopover>
 
                 <span
-                v-else-if="isReply"
+                  v-else
                   class="reply-to-no-popover"
                 >
                   <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
                 </span>
-
                 <MentionLink
                   :content="replyToName"
                   :url="replyProfileLink"
@@ -264,17 +267,19 @@
                   :user-screen-name="status.in_reply_to_screen_name"
                   :first-mention="false"
                 />
+              </span>
 
+              <!-- This little wrapper is made for sole purpose of "gluing" -->
+              <!-- "Mentions" label to the first mention -->
               <span
                 v-if="hasMentionsLine"
+                class="glued-label"
+              >
+                <span
                   class="mentions"
                   :aria-label="$t('tool_tip.mentions')"
                   @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                 >
-                <FAIcon
-                  class="fa-scale-110 fa-old-padding"
-                  icon="at"
-                />
                   <span
                     class="faint-link mentions-text"
                   >
@@ -283,7 +288,13 @@
                 </span>
                 <MentionsLine
                   v-if="hasMentionsLine"
-                :mentions="mentionsLine"
+                  :mentions="mentionsLine.slice(0, 1)"
+                  class="mentions-line-first"
+                />
+              </span>
+              <MentionsLine
+                v-if="hasMentionsLine"
+                :mentions="mentionsLine.slice(1)"
                 class="mentions-line"
               />
             </div>