From 62053d00dc4088b0738c396286dfac472e19a418 Mon Sep 17 00:00:00 2001
From: Ayaka Rizumu <464388324@qq.com>
Date: Thu, 1 Dec 2022 22:55:49 +0800
Subject: [PATCH] fix: too long username cause scroll horizontally (#274)

---
 components/account/AccountHandle.vue | 2 +-
 components/account/AccountInfo.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/account/AccountHandle.vue b/components/account/AccountHandle.vue
index 8173d99c..62fc4116 100644
--- a/components/account/AccountHandle.vue
+++ b/components/account/AccountHandle.vue
@@ -9,7 +9,7 @@ const serverName = $computed(() => getServerName(account))
 </script>
 
 <template>
-  <p>
+  <p line-clamp-1 whitespace-pre-wrap break-all text-secondary-light>
     <span text-secondary>{{ getShortHandle(account) }}</span>
     <span v-if="serverName" text-secondary-light>@{{ serverName }}</span>
   </p>
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index 0e22be9e..bc196dee 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -21,7 +21,7 @@ defineOptions({
     </AccountHoverWrapper>
     <div flex="~ col" shrink overflow-hidden>
       <ContentRich font-bold :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" overflow-hidden truncate text-ellipsis />
-      <AccountHandle :account="account" text-sm overflow-hidden truncate text-ellipsis text-secondary-light />
+      <AccountHandle :account="account" text-sm text-secondary-light />
     </div>
   </component>
 </template>