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

@@ -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,14 +100,19 @@
               v-else
               :to="retweeterProfileLink"
             >{{ retweeter }}</router-link>
-          </span>
+          </div>
           {{ ' ' }}
-          <FAIcon
+
-            icon="retweet"
+          <div
-            class="repeat-icon"
+            class="repeat-tooltip"
-            :title="$t('tool_tip.repeat')"
+          >
-          />
+             <FAIcon
-          {{ $t('timeline.repeated') }}
+               icon="retweet"
+               class="repeat-icon"
+               :title="$t('tool_tip.repeat')"
+             />
+             {{ $t('timeline.repeated') }}
+          </div>
         </div>
       </div>