Style properly usernames without tooltips

2 files changed, 9 insertions, 8 deletions

diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index ec2689f8..44e1363a 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -27,7 +27,7 @@
     user-select: all;
   }
 
-  .short {
+  .short.-with-tooltip {
     user-select: none;
   }
 
@@ -56,7 +56,7 @@
     }
 
     &.-striped {
-      & .userName,
+      & .shortName,
       & .full {
         background-image:
           repeating-linear-gradient(
@@ -70,14 +70,14 @@
     }
 
     &.-solid {
-      & .userName,
+      & .shortName,
       & .full {
         background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
       }
     }
 
     &.-side {
-      & .userName,
+      & .shortName,
       & .userNameFull {
         box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
       }
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index fe16cbf5..c9baee10 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -19,18 +19,19 @@
     >
       <a
         class="short button-unstyled"
+        :class="{ '-with-tooltip': shouldShowTooltip }"
         :href="url"
         @click.prevent="onClick"
       >
         <!-- eslint-disable vue/no-v-html -->
-        <FAIcon
+        <span
+          class="shortName"
+        ><FAIcon
           v-if="useAtIcon"
           size="sm"
           icon="at"
           class="at"
-        /><span
-          class="shortName"
-        >{{ !useAtIcon ? '@' : '' }}<span
+        />{{ !useAtIcon ? '@' : '' }}<span
           class="userName"
           v-html="userName"
         /><span