2 files changed, 15 insertions, 16 deletions
diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index b9d5c14a..9a622e75 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -1,11 +1,13 @@
 .MentionsLine {
+  word-break: break-all;
+
+  .mention-link:not(:first-child)::before {
+    content: ' ';
+  }
+
   .showMoreLess {
+    margin-left: 0.5em;
     white-space: normal;
     color: var(--link);
   }
-
-  .fullExtraMentions,
-  .mention-link:not(:last-child) {
-    margin-right: 0.25em;
-  }
 }
diff --git a/src/components/mentions_line/mentions_line.vue b/src/components/mentions_line/mentions_line.vue
index f375e3b0..64c19bf1 100644
--- a/src/components/mentions_line/mentions_line.vue
+++ b/src/components/mentions_line/mentions_line.vue
@@ -6,7 +6,6 @@
       class="mention-link"
       :content="mention.content"
       :url="mention.url"
-      :first-mention="false"
     /><span
       v-if="manyMentions"
       class="extraMentions"
@@ -14,15 +13,13 @@
       <span
         v-if="expanded"
         class="fullExtraMentions"
-      >
-        <MentionLink
-          v-for="mention in extraMentions"
-          :key="mention.index"
-          class="mention-link"
-          :content="mention.content"
-          :url="mention.url"
-          :first-mention="false"
-        />
+      >{{ ' ' }}<MentionLink
+        v-for="mention in extraMentions"
+        :key="mention.index"
+        class="mention-link"
+        :content="mention.content"
+        :url="mention.url"
+      />
       </span><button
         v-if="!expanded"
         class="button-unstyled showMoreLess"
@@ -39,5 +36,5 @@
     </span>
   </span>
 </template>
-<script src="./mentions_line.js" ></script>
+<script src="./mentions_line.js"></script>
 <style lang="scss" src="./mentions_line.scss" />