Merge pull request 'status component: Fix repeater name overflowing' (#383) from yukijoou/akkoma-fe:fix-status-usernames into develop

Reviewed-on: https://akkoma.dev/AkkomaGang/akkoma-fe/pulls/383

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 {

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,8 +100,12 @@
               v-else
               :to="retweeterProfileLink"
             >{{ retweeter }}</router-link>
-          </span>
+          </div>
           {{ ' ' }}
+
+          <div
+            class="repeat-tooltip"
+          >
              <FAIcon
                icon="retweet"
                class="repeat-icon"
@@ -110,6 +114,7 @@
              {{ $t('timeline.repeated') }}
           </div>
         </div>
+      </div>
 
       <div
         v-if="!deleted"