fix: 🐛 Fix various layout issues from previous update

components/profiles/avatar.vue

@@ -1,5 +1,5 @@
 <template>
-    <Avatar :class="shape.value === 'square' && 'rounded-md'">
+    <Avatar :class="[shape.value === 'square' && 'rounded-md', 'bg-secondary']">
         <AvatarFallback v-if="name">
             {{ getInitials(name) }}
         </AvatarFallback>

components/profiles/profile-header.vue

@@ -16,8 +16,7 @@
             class="absolute bottom-0 translate-y-1/3 left-4 flex flex-row items-start gap-2"
         >
             <Avatar
-                size="lg"
-                class="border"
+                class="size-32 border"
                 :src="avatar"
                 :name="displayName"
             />

components/profiles/profile.vue

@@ -30,7 +30,7 @@
                     </Button>
                 </ProfileActions>
             </div>
-            <div class="flex flex-col -mt-1 gap-2 justify-center">
+            <div class="flex flex-col -mt-1 gap-1 justify-center">
                 <CardTitle class="" v-render-emojis="account.emojis">
                     {{ account.display_name }}
                 </CardTitle>
@@ -45,10 +45,10 @@
                     >
                 </CopyableText>
             </div>
-            <ProfileBadges :account="account" />
+            <ProfileBadges :account="account" class="my-2" />
             <ProfileContent :content="account.note" :emojis="account.emojis" />
         </CardContent>
-        <CardFooter>
+        <CardFooter class="flex-col *:w-full gap-4">
             <ProfileStats
                 :creation-date="new Date(account.created_at || 0)"
                 :follower-count="account.followers_count"