From 8c49474deacbc6c398308c2432ca8bec839ae6cb Mon Sep 17 00:00:00 2001
From: Yuki Joou <yukijoou@kemonomimi.gay>
Date: Mon, 1 Apr 2024 16:57:11 +0200
Subject: [PATCH] status component: Fix repeater name overflowing

If someone repeating a post had a long username, their username would
overflow beyond the bounds of the post.

This fixes this isse by turning the bar displaying the username and
repeat icon into a flexbox.
---
 src/components/status/status.scss | 10 ++++++++++
 src/components/status/status.vue  | 21 +++++++++++++--------
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index cd65b890..56af76a6 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -266,6 +266,16 @@
       color: $fallback--cGreen;
       color: var(--cGreen, $fallback--cGreen);
     }
+
+    .right-side {
+      display: flex;
+      align-items: center;
+      gap: 0.3em;
+    }
+
+    .repeat-tooltip {
+      flex-shrink: 0;
+    }
   }
 
   .repeater-avatar {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index c34d38f0..87cf6cf6 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -83,7 +83,7 @@
           :user="statusoid.user"
         />
         <div class="right-side faint">
-          <span
+          <div
             class="status-username repeater-name"
             :title="retweeter"
           >
@@ -100,14 +100,19 @@
               v-else
               :to="retweeterProfileLink"
             >{{ retweeter }}</router-link>
-          </span>
+          </div>
           {{ ' ' }}
-          <FAIcon
-            icon="retweet"
-            class="repeat-icon"
-            :title="$t('tool_tip.repeat')"
-          />
-          {{ $t('timeline.repeated') }}
+
+          <div
+            class="repeat-tooltip"
+          >
+             <FAIcon
+               icon="retweet"
+               class="repeat-icon"
+               :title="$t('tool_tip.repeat')"
+             />
+             {{ $t('timeline.repeated') }}
+          </div>
         </div>
       </div>