From 46520dadfd2cb0218601b4132c067dc1b8c84b7d Mon Sep 17 00:00:00 2001
From: Beefox <bee@beefox.xyz>
Date: Mon, 21 Nov 2022 16:49:18 +0000
Subject: [PATCH] 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: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/226
Co-authored-by: Beefox <bee@beefox.xyz>
Co-committed-by: Beefox <bee@beefox.xyz>
---
 .gitignore                        |  1 +
 src/components/status/status.scss |  9 +++++++++
 src/components/status/status.vue  | 28 +++++++++++++++-------------
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/.gitignore b/.gitignore
index a400ce86..a0be5c16 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ selenium-debug.log
 config/local.json
 config/local.*.json
 docs/site/
+.vscode/
\ No newline at end of file
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 448577d3..ce199203 100644
--- a/src/components/status/status.scss
+++ b/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);
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index ceb66c21..24f64248 100644
--- a/src/components/status/status.vue
+++ b/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">