From 93d78d9c8b3e9f47e9cce1fc132615f8fad76cf6 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 30 Nov 2022 21:38:18 +0000
Subject: [PATCH] fix(ui): truncate account info (#261)

---
 components/account/AccountCard.vue | 4 +++-
 components/account/AccountInfo.vue | 8 ++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/account/AccountCard.vue b/components/account/AccountCard.vue
index c0f1263e..c20c9934 100644
--- a/components/account/AccountCard.vue
+++ b/components/account/AccountCard.vue
@@ -14,9 +14,11 @@ cacheAccount(account)
     <AccountInfo
       :account="account" hover p1 as="router-link"
       :hover-card="hoverCard"
+      shrink
+      overflow-hidden
       :to="getAccountRoute(account)"
     />
-    <div h-full p1>
+    <div h-full p1 shrink-0>
       <AccountFollowButton :account="account" />
     </div>
   </div>
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index 39e50c63..b303b2a5 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -16,12 +16,12 @@ defineOptions({
 <!-- This is sometimes (like in the sidebar) used directly as a button, and sometimes, like in follow notifications, as a link. I think this component may need a second refactor that either lets an implementation pass in a link or an action and adapt to what's passed in, or the implementations need to be updated to wrap in the action they want to take and this be just the layout for these items -->
 <template>
   <component :is="as" flex gap-3 v-bind="$attrs">
-    <AccountHoverWrapper :disabled="!hoverCard" :account="account">
+    <AccountHoverWrapper :disabled="!hoverCard" :account="account" shrink-0>
       <AccountAvatar :account="account" w-12 h-12 />
     </AccountHoverWrapper>
-    <div flex="~ col">
-      <ContentRich font-bold :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
-      <AccountHandle :account="account" text-sm />
+    <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 />
     </div>
   </component>
 </template>