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

@@ -225,65 +225,76 @@
               class="heading-reply-row"
               v-if="isReply || hasMentionsLine"
               >
-              <StatusPopover
-                v-if="isReply && !isPreview"
-                :status-id="status.parent_visible && status.in_reply_to_status_id"
-                class="reply-to-popover"
-                style="min-width: 0"
-                :class="{ '-strikethrough': !status.parent_visible }"
-              >
-                <button
-                  class="button-unstyled reply-to"
-                  :aria-label="$t('tool_tip.reply')"
-                  @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
-                >
-                  <FAIcon
-                    class="fa-scale-110 fa-old-padding"
-                    icon="reply"
-                    flip="horizontal"
-                  />
-                  <span
-                    class="faint-link reply-to-text"
-                  >
-                    {{ $t('status.reply_to') }}
-                  </span>
-                </button>
-              </StatusPopover>
-
               <span
-                v-else-if="isReply"
+                class="glued-label"
-                class="reply-to-no-popover"
+                v-if="isReply"
               >
-                <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
+                <StatusPopover
+                   v-if="!isPreview"
+                  :status-id="status.parent_visible && status.in_reply_to_status_id"
+                  class="reply-to-popover"
+                  style="min-width: 0"
+                  :class="{ '-strikethrough': !status.parent_visible }"
+                >
+                  <button
+                    class="button-unstyled reply-to"
+                    :aria-label="$t('tool_tip.reply')"
+                    @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+                  >
+                    <FAIcon
+                      class="fa-scale-110 fa-old-padding"
+                      icon="reply"
+                      flip="horizontal"
+                    />
+                    <span
+                      class="faint-link reply-to-text"
+                    >
+                      {{ $t('status.reply_to') }}
+                    </span>
+                  </button>
+                </StatusPopover>
+
+                <span
+                  v-else
+                  class="reply-to-no-popover"
+                >
+                  <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
+                </span>
+                <MentionLink
+                  :content="replyToName"
+                  :url="replyProfileLink"
+                  :user-id="status.in_reply_to_user_id"
+                  :user-screen-name="status.in_reply_to_screen_name"
+                  :first-mention="false"
+                />
               </span>
 
-              <MentionLink
+              <!-- This little wrapper is made for sole purpose of "gluing" -->
-                :content="replyToName"
+              <!-- "Mentions" label to the first mention -->
-                :url="replyProfileLink"
-                :user-id="status.in_reply_to_user_id"
-                :user-screen-name="status.in_reply_to_screen_name"
-                :first-mention="false"
-              />
-
               <span
                 v-if="hasMentionsLine"
-                class="mentions"
+                class="glued-label"
-                :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"
+                  class="mentions"
+                  :aria-label="$t('tool_tip.mentions')"
+                  @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                 >
-                  {{ $t('status.mentions') }}
+                  <span
+                    class="faint-link mentions-text"
+                  >
+                    {{ $t('status.mentions') }}
+                  </span>
                 </span>
+                <MentionsLine
+                  v-if="hasMentionsLine"
+                  :mentions="mentionsLine.slice(0, 1)"
+                  class="mentions-line-first"
+                />
               </span>
               <MentionsLine
                 v-if="hasMentionsLine"
-                :mentions="mentionsLine"
+                :mentions="mentionsLine.slice(1)"
                 class="mentions-line"
               />
             </div>