From 71369c4c7823853ac9a77c8f40efe1cb68e1e10a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chris=E2=80=8B=E2=80=8C=E2=80=8B=E2=80=AE=20=E2=80=ACHayes?=
 =?UTF-8?q?=E2=80=8C=E2=80=8B=E2=80=8B=E2=80=8B?= <chris+git@hayes.software>
Date: Tue, 13 Aug 2024 11:45:09 -0400
Subject: [PATCH] fix(ui): profile name gets cut off by roles (#2915)

---
 components/account/AccountHeader.vue    | 4 +++-
 components/account/AccountHoverCard.vue | 2 +-
 components/account/AccountInfo.vue      | 8 +++++---
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 03b7c721..b28a25b0 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -189,7 +189,6 @@ async function copyAccountName() {
         <div flex="~ col gap1" pt2>
           <div flex gap2 items-center flex-wrap>
             <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
-            <AccountRolesIndicator v-if="account.roles?.length" :account="account" />
             <AccountLockIndicator v-if="account.locked" show-label />
             <AccountBotIndicator v-if="account.bot" show-label />
           </div>
@@ -202,6 +201,9 @@ async function copyAccountName() {
               </button>
             </CommonTooltip>
           </div>
+          <div self-start mt-1>
+            <AccountRolesIndicator v-if="account.roles?.length" :account="account" />
+          </div>
         </div>
       </div>
       <label
diff --git a/components/account/AccountHoverCard.vue b/components/account/AccountHoverCard.vue
index d0df0429..a7bf1130 100644
--- a/components/account/AccountHoverCard.vue
+++ b/components/account/AccountHoverCard.vue
@@ -12,7 +12,7 @@ const relationship = useRelationship(account)
   <div v-show="relationship" flex="~ col gap2" rounded min-w-90 max-w-120 z-100 overflow-hidden p-4>
     <div flex="~ gap2" items-center>
       <NuxtLink :to="getAccountRoute(account)" flex-auto rounded-full hover:bg-active transition-100 pe5 me-a>
-        <AccountInfo :account="account" />
+        <AccountInfo :account="account" :hover-card="true" />
       </NuxtLink>
       <AccountFollowButton text-sm :account="account" :relationship="relationship" />
     </div>
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index 5730a08a..91d30387 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -16,18 +16,20 @@ const { account, as = 'div' } = defineProps<{
 <!-- TODO: Make this work for both buttons and links -->
 <!-- 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">
+  <component :is="as" flex items-center gap-3 v-bind="$attrs">
     <AccountHoverWrapper :disabled="!hoverCard" :account="account">
       <AccountBigAvatar :account="account" shrink-0 :square="square" />
     </AccountHoverWrapper>
-    <div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none select-none>
+    <div flex="~ col" shrink h-full overflow-hidden justify-center leading-none select-none p-1>
       <div flex="~" gap-2>
         <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
-        <AccountRolesIndicator v-if="account.roles?.length" :account="account" :limit="1" />
         <AccountLockIndicator v-if="account.locked" text-xs />
         <AccountBotIndicator v-if="account.bot" text-xs />
       </div>
       <AccountHandle :account="account" text-secondary-light />
+      <div self-start mt-1>
+        <AccountRolesIndicator v-if="account.roles?.length" :account="account" :limit="1" />
+      </div>
     </div>
   </component>
 </template>