ui: move hover card

components/account/AccountInlineInfo.vue

@@ -8,6 +8,7 @@ const { link = true } = defineProps<{
 </script>
 
 <template>
+  <AccountHoverWrapper :account="account">
     <NuxtLink
       :to="link ? getAccountPath(account) : undefined"
       :class="link ? 'text-link-rounded' : ''"
@@ -16,4 +17,5 @@ const { link = true } = defineProps<{
       <AccountAvatar :account="account" w-5 h-5 />
       <ContentRich :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
     </NuxtLink>
+  </AccountHoverWrapper>
 </template>

components/status/StatusAccountDetails.vue

@@ -8,7 +8,6 @@ const { account, link = true } = defineProps<{
 </script>
 
 <template>
-  <AccountHoverWrapper :account="account">
   <NuxtLink
     :to="link ? getAccountPath(account) : undefined"
     flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
@@ -17,5 +16,4 @@ const { account, link = true } = defineProps<{
     <ContentRich font-bold break-words :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
     <AccountHandle :account="account" />
   </NuxtLink>
-  </AccountHoverWrapper>
 </template>

components/status/StatusCard.vue

@@ -48,13 +48,17 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
     </div>
     <div flex gap-4>
       <div>
+        <AccountHoverWrapper :account="status.account">
           <NuxtLink :to="getAccountPath(status.account)" rounded-full>
             <AccountAvatar w-12 h-12 :account="status.account" />
           </NuxtLink>
+        </AccountHoverWrapper>
       </div>
       <div flex="~ col 1" min-w-0>
         <div flex>
+          <AccountHoverWrapper :account="status.account">
             <StatusAccountDetails :account="status.account" />
+          </AccountHoverWrapper>
           <div flex-auto />
           <div text-sm text-secondary flex="~ row nowrap" hover:underline>
             <CommonTooltip :content="createdAt">