ui: improve hover card motion

components/account/AccountAvatar.vue

@@ -14,10 +14,18 @@ defineOptions({
 <template>
   <div v-if="hover" relative flex-shrink-0>
     <div group>
-      <AccountHoverCard top="-3.2" left="-4.4" absolute :account="account" op0 pointer-events-none group-hover="pointer-events-auto op100 scale-100" font-normal delay-250 transition transform scale-20 class="ease-[cubic-bezier(0.4, 0.0, 0.2, 1)]" />
+      <AccountHoverCard
+        :account="account"
+        absolute top-0 left-0 z-10
+        op0 pointer-events-none rotate--2
+        font-normal delay-300 duration-300 transition transform
+        group-hover="pointer-events-auto op100 rotate-0"
+        translate="x-[calc(-1rem-1px)] y-[calc(-1rem-1px)]"
+        class="ease-[cubic-bezier(0.4, 0.0, 0.2, 1)]"
+        style="transform-origin: calc(1rem + 1px) calc(0.75rem + 1px);"
+      />
       <AccountAvatarImage :account="account" v-bind="$attrs" />
     </div>
   </div>
-
   <AccountAvatarImage v-else :account="account" v-bind="$attrs" />
 </template>

components/account/AccountHoverCard.vue

@@ -25,9 +25,3 @@ defineProps<{
     <ContentRichSetup text-4 text-gray :content="account.note" :emojis="account.emojis" />
   </div>
 </template>
-
-<style>
-.account-hover-card {
-  transform-origin: 3em 3em;
-}
-</style>

components/account/AccountInlineInfo.vue

@@ -9,7 +9,7 @@ const { link = true } = defineProps<{
 
 <template>
   <NuxtLink :to="link ? getAccountPath(account) : undefined" min-w-0 flex gap-1 items-center>
-    <AccountAvatar :account="account" w-5 h-5 hover />
+    <AccountAvatar :account="account" w-5 h-5 />
     <ContentRichSetup hover:underline :content="getDisplayName(account)" :emojis="account.emojis" />
   </NuxtLink>
 </template>

components/status/StatusCard.vue

@@ -77,7 +77,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
       </div>
     </div>
     <div flex gap-4>
-      <AccountAvatar mt1 w-12 h-12 :account="status.account" hover />
+      <AccountAvatar w-12 h-12 :account="status.account" hover />
       <div flex="~ col 1" min-w-0>
         <div flex>
           <StatusAccountDetails :account="status.account" />