From 0260693f5162ea8a73d2b359940781049a1b3e76 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Jun 2021 13:22:36 +0300
Subject: [PATCH] stylistic improvements for single-line mentions

---
 src/components/mention_link/mention_link.scss |   2 +
 src/components/status/status.scss             |  22 +---
 src/components/status/status.vue              | 122 ++++++++----------
 src/components/status_body/status_body.vue    |   1 -
 4 files changed, 62 insertions(+), 85 deletions(-)

diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index eed4d5bef2..a18475a1d1 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -32,6 +32,8 @@
 
   & .short,
   & .full {
+    white-space: nowrap;
+
     &::before {
       content: '@';
     }
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 8f7fb71ab9..60dd8237f8 100644
--- a/src/components/status/status.scss
+++ b/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 {
-    margin-left: 0.4em;
+  .mentions-line {
+    display: inline-block;
   }
 
   .replies {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e4c3a755fa..9e08ce85aa 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -221,81 +221,71 @@
                 </button>
               </span>
             </div>
-            <div class="heading-reply-row">
-              <div
-                v-if="isReply"
-                class="reply-to-and-accountname"
+            <div
+              class="heading-reply-row"
+              v-if="isReply || hasMentionsLine"
               >
-                <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 }"
+              <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)"
                 >
-                  <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"
                   >
-                    <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>
+                    {{ $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>
+              <span
+                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"
+              <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
+                v-if="hasMentionsLine"
+                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
-                  v-if="isReply && hasMentionsLine"
-                  class="faint mentions-separator"
+                  class="faint-link mentions-text"
                 >
-                  -
+                  {{ $t('status.mentions') }}
                 </span>
-                <span
-                  v-if="hasMentionsLine"
-                >
-                  <span
-                    class="button-unstyled mentions"
-                    :aria-label="$t('tool_tip.reply')"
-                    @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"
-                      >
-                      {{ $t('status.mentions') }}
-                    </span>
-                  </span>
-                  <MentionsLine
-                    :mentions="mentionsLine"
-                    class="mentions-line"
-                  />
-                </span>
-              </div>
+              </span>
+              <MentionsLine
+                v-if="hasMentionsLine"
+                :mentions="mentionsLine"
+                class="mentions-line"
+              />
             </div>
           </div>
 
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 3c291cf686..4df2993456 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -54,7 +54,6 @@
               <MentionsLine
                 v-if="!hideFirstMentions"
                 :mentions="mentions"
-                class="mentions-line"
               />
             </template>
           </RichContent>