stylistic improvements for single-line mentions

src/components/mention_link/mention_link.scss

@@ -32,6 +32,8 @@
 
   & .short,
   & .full {
+    white-space: nowrap;
+
     &::before {
       content: '@';
     }

src/components/status/status.scss

@@ -155,32 +155,17 @@ $status-margin: 0.75em;
     margin-right: 0.2em;
   }
 
-  & .heading-mentions-row,
   & .heading-reply-row {
     position: relative;
     align-content: baseline;
     font-size: 12px;
-    line-height: 18px;
+    line-height: 160%;
     max-width: 100%;
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
   }
 
-  .reply-to-and-accountname {
-    display: flex;
-    height: 18px;
-    margin-right: 0.5em;
-    max-width: 100%;
-
-    .reply-to-link {
-      white-space: nowrap;
-      word-break: break-word;
-      text-overflow: ellipsis;
-      overflow-x: hidden;
-    }
-  }
-
   & .reply-to-popover,
   & .reply-to-no-popover {
     min-width: 0;
@@ -219,6 +204,7 @@ $status-margin: 0.75em;
 
   & .mentions,
   & .reply-to {
+    white-space: nowrap;
     position: relative;
   }
 
@@ -228,8 +214,8 @@ $status-margin: 0.75em;
     white-space: nowrap;
   }
 
-  .mentions-separator {
+  .mentions-line {
-    margin-left: 0.4em;
+    display: inline-block;
   }
 
   .replies {

src/components/status/status.vue

@@ -221,13 +221,12 @@
                 </button>
               </span>
             </div>
-            <div class="heading-reply-row">
             <div
-                v-if="isReply"
+              class="heading-reply-row"
-                class="reply-to-and-accountname"
+              v-if="isReply || hasMentionsLine"
               >
               <StatusPopover
-                  v-if="!isPreview"
+                v-if="isReply && !isPreview"
                 :status-id="status.parent_visible && status.in_reply_to_status_id"
                 class="reply-to-popover"
                 style="min-width: 0"
@@ -252,32 +251,24 @@
               </StatusPopover>
 
               <span
-                  v-else
+                v-else-if="isReply"
                 class="reply-to-no-popover"
               >
                 <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
               </span>
 
               <MentionLink
-                  class="mention-link"
                 :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
+
-                  v-if="isReply && hasMentionsLine"
-                  class="faint mentions-separator"
-                >
-                  -
-                </span>
               <span
                 v-if="hasMentionsLine"
-                >
+                class="mentions"
-                  <span
+                :aria-label="$t('tool_tip.mentions')"
-                    class="button-unstyled mentions"
-                    :aria-label="$t('tool_tip.reply')"
                 @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
               >
                 <FAIcon
@@ -291,11 +282,10 @@
                 </span>
               </span>
               <MentionsLine
+                v-if="hasMentionsLine"
                 :mentions="mentionsLine"
                 class="mentions-line"
               />
-                </span>
-              </div>
             </div>
           </div>
 

src/components/status_body/status_body.vue

@@ -54,7 +54,6 @@
               <MentionsLine
                 v-if="!hideFirstMentions"
                 :mentions="mentions"
-                class="mentions-line"
               />
             </template>
           </RichContent>