From 9f44e607ad3a5bddf0cd213991d8d0f35df8a91b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Fri, 25 Nov 2022 18:20:01 +0800
Subject: [PATCH] refactor: improve break words UI

---
 components/account/AccountHeader.vue       | 4 ++--
 components/account/AccountInlineInfo.vue   | 2 +-
 components/status/StatusAccountDetails.vue | 7 +++++--
 components/status/StatusCard.vue           | 4 ++--
 components/status/StatusReplyingTo.vue     | 2 +-
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index d5c0521b..451009df 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -52,14 +52,14 @@ function getFieldNameIcon(fieldName: string) {
     </div>
     <div p4 mt--17 flex flex-col gap-6>
       <div flex justify-between>
-        <div flex flex-col gap-2>
+        <div flex="~ col gap-2 1" min-w-0>
           <div>
             <NuxtLink :to="getAccountPath(account)">
               <AccountAvatar :account="account" w-30 h-30 />
             </NuxtLink>
           </div>
           <div flex flex-col>
-            <ContentRichSetup font-bold text-2xl :content="getDisplayName(account)" :emojis="account.emojis" />
+            <ContentRichSetup font-bold text-2xl break-words :content="getDisplayName(account)" :emojis="account.emojis" />
             <p op50>
               {{ getAccountHandle(account) }}
             </p>
diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index 1163c613..fe859023 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/components/account/AccountInlineInfo.vue
@@ -8,7 +8,7 @@ const { link = true } = defineProps<{
 </script>
 
 <template>
-  <NuxtLink :to="link ? getAccountPath(account) : undefined" flex gap-1 items-center>
+  <NuxtLink :to="link ? getAccountPath(account) : undefined" min-w-0 flex gap-1 items-center>
     <AccountAvatar :account="account" w-5 h-5 />
     <ContentRichSetup :content="getDisplayName(account)" :emojis="account.emojis" />
   </NuxtLink>
diff --git a/components/status/StatusAccountDetails.vue b/components/status/StatusAccountDetails.vue
index ef624ce9..240335dd 100644
--- a/components/status/StatusAccountDetails.vue
+++ b/components/status/StatusAccountDetails.vue
@@ -10,8 +10,11 @@ const accountHandle = $(useAccountHandle(account))
 </script>
 
 <template>
-  <NuxtLink :to="link ? getAccountPath(account) : undefined" flex flex-col md:flex-row md:gap-2 md:items-center>
-    <ContentRichSetup font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
+  <NuxtLink
+    :to="link ? getAccountPath(account) : undefined"
+    flex="col 1" min-w-0 md:flex="~ gap-2" md:items-center
+  >
+    <ContentRichSetup font-bold break-words :content="getDisplayName(account)" :emojis="account.emojis" />
     <p op35 text-sm>
       {{ accountHandle }}
     </p>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 5dea456f..a2b92859 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -73,7 +73,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
 <template>
   <div ref="el" flex flex-col gap-2 px-4 transition-100 cursor-pointer :class="{ 'hover:bg-active': hover }" @click="onclick">
     <div v-if="rebloggedBy" pl8>
-      <div flex gap-1 items-center text-gray:75 text-sm>
+      <div flex="~ wrap" gap-1 items-center text-gray:75 text-sm>
         <div i-ri:repeat-fill mr-1 />
         <AccountInlineInfo font-bold :account="rebloggedBy" />
         reblogged
@@ -86,7 +86,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
           <AccountAvatar mt1 w-12 h-12 :account="status.account" />
         </div>
       </div>
-      <div flex="~ col 1" w-0>
+      <div flex="~ col 1" min-w-0>
         <div flex>
           <StatusAccountDetails :account="status.account" />
           <div flex-auto />
diff --git a/components/status/StatusReplyingTo.vue b/components/status/StatusReplyingTo.vue
index 1f38e6fe..d27a745f 100644
--- a/components/status/StatusReplyingTo.vue
+++ b/components/status/StatusReplyingTo.vue
@@ -11,7 +11,7 @@ const account = asyncComputed(() => fetchAccount(status.inReplyToAccountId!))
 <template>
   <NuxtLink
     v-if="status.inReplyToId"
-    flex="~" items-center text-sm text-gray:85
+    flex="~ wrap" items-center text-sm text-gray:85
     :to="getStatusPath({ id: status.inReplyToId } as any)"
     :title="account ? `Replying to ${getDisplayName(account)}` : 'Replying to someone'"
   >