mobile-newline (#226)

Allows the handle of users to drop down onto the next line if there isn't enough room in order to improve useability on mobile

Reviewed-on: AkkomaGang/pleroma-fe#226
Co-authored-by: Beefox <bee@beefox.xyz>
Co-committed-by: Beefox <bee@beefox.xyz>

.gitignore

@@ -9,3 +9,4 @@ selenium-debug.log
 config/local.json
 config/local.*.json
 docs/site/
+.vscode/

src/components/status/status.scss

@@ -130,6 +130,13 @@
   .heading-left {
     display: flex;
     min-width: 0;
+    flex-wrap: wrap;
+    img {
+      aspect-ratio: 1 / 1;
+    }
+    .nowrap{
+      white-space: nowrap;
+    }
   }
 
   .heading-right {
@@ -140,6 +147,8 @@
       padding: 5px;
       margin: -5px;
 
+      height: min-content;
+
       &:hover svg {
         color: $fallback--lightText;
         color: var(--lightText, $fallback--lightText);

src/components/status/status.vue

@@ -166,19 +166,21 @@
                 >
                   {{ status.user.name }}
                 </h4>
-                <router-link
-                  class="account-name"
-                  :title="status.user.screen_name_ui"
-                  :to="userProfileLink"
-                >
-                  {{ status.user.screen_name_ui }}
-                </router-link>
-                <img
-                  v-if="!!(status.user && status.user.favicon)"
-                  class="status-favicon"
-                  :src="status.user.favicon"
-                  :title="faviconAlt(status)"
-                >
+                <span class="nowrap">
+                  <router-link
+                    class="account-name"
+                    :title="status.user.screen_name_ui"
+                    :to="userProfileLink"
+                  >
+                    @{{ status.user.screen_name_ui }}
+                  </router-link>
+                  <img
+                    v-if="!!(status.user && status.user.favicon)"
+                    class="status-favicon"
+                    :src="status.user.favicon"
+                    :title="faviconAlt(status)"
+                  >
+                </span>
               </div>
 
               <span class="heading-right">