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,12 +166,13 @@
                 >
                   {{ status.user.name }}
                 </h4>
+                <span class="nowrap">
                   <router-link
                     class="account-name"
                     :title="status.user.screen_name_ui"
                     :to="userProfileLink"
                   >
-                  {{ status.user.screen_name_ui }}
+                    @{{ status.user.screen_name_ui }}
                   </router-link>
                   <img
                     v-if="!!(status.user && status.user.favicon)"
@@ -179,6 +180,7 @@
                     :src="status.user.favicon"
                     :title="faviconAlt(status)"
                   >
+                </span>
               </div>
 
               <span class="heading-right">