fix: 🐛 Fix various layout issues from previous update

components/notes/attachment.vue

@@ -1,6 +1,6 @@
 <template>
     <Dialog>
-        <Card class="w-full h-full overflow-hidden relative">
+        <Card class="w-full h-full overflow-hidden relative p-0">
             <DialogTrigger v-if="attachment.type === 'image'" :as-child="true">
                 <img :src="attachment.url" :alt="attachment.description ?? undefined"
                     class="w-full h-full object-contain bg-muted/20" />
@@ -30,36 +30,38 @@
             </Popover>
         </Card>
         <DialogContent :hide-close="true"
-            class="fixed inset-0 z-50 w-screen h-screen p-6 duration-200 bg-transparent border-none grid grid-rows-[auto_1fr_auto] overflow-hidden translate-x-0 translate-y-0 max-w-full !animate-none gap-6">
+            class="p-6 duration-200 bg-transparent border-none overflow-hidden !animate-none gap-6 w-screen h-screen !max-w-none">
-            <div class="flex flex-row gap-2 w-full">
+            <div class="grid grid-rows-[auto_1fr_auto]">
-                <DialogTitle class="sr-only">{{ attachment.type }}</DialogTitle>
+                <div class="flex flex-row gap-2 w-full">
-                <Button as="a" :href="attachment?.url" target="_blank" :download="true" variant="ghost" size="icon"
+                    <DialogTitle class="sr-only">{{ attachment.type }}</DialogTitle>
-                    class="[&_svg]:size-6  ml-auto">
+                    <Button as="a" :href="attachment?.url" target="_blank" :download="true" variant="ghost" size="icon"
-                    <Download />
+                        class="[&_svg]:size-6  ml-auto">
-                </Button>
+                        <Download />
-                <DialogClose :as-child="true">
-                    <Button variant="ghost" size="icon" class="[&_svg]:size-6">
-                        <X />
                     </Button>
-                </DialogClose>
+                    <DialogClose :as-child="true">
-            </div>
+                        <Button variant="ghost" size="icon" class="[&_svg]:size-6">
-            <div class="flex items-center justify-center overflow-hidden *:max-h-[80vh] *:max-w-[80vw]">
+                            <X />
-                <img v-if="attachment.type === 'image'" :src="attachment.url" :alt="attachment.description ?? ''"
+                        </Button>
-                    class="object-contain" />
+                    </DialogClose>
-                <video v-else-if="attachment.type === 'video' || attachment.type === 'gifv'" :src="attachment.url"
-                    :alt="attachment.description ?? ''" class="object-cover" controls />
-                <audio v-else-if="attachment.type === 'audio'" :src="attachment.url" :alt="attachment.description ?? ''"
-                    class="object-cover" controls />
-                <div v-else class="flex flex-col items-center justify-center">
-                    <File class="size-12" />
-                    <span class="text-sm"></span>
                 </div>
+                <div class="flex items-center justify-center overflow-hidden *:max-h-[80vh] *:max-w-[80vw]">
+                    <img v-if="attachment.type === 'image'" :src="attachment.url" :alt="attachment.description ?? ''"
+                        class="object-contain" />
+                    <video v-else-if="attachment.type === 'video' || attachment.type === 'gifv'" :src="attachment.url"
+                        :alt="attachment.description ?? ''" class="object-cover" controls />
+                    <audio v-else-if="attachment.type === 'audio'" :src="attachment.url"
+                        :alt="attachment.description ?? ''" class="object-cover" controls />
+                    <div v-else class="flex flex-col items-center justify-center">
+                        <File class="size-12" />
+                        <span class="text-sm"></span>
+                    </div>
+                </div>
+                <DialogDescription class="flex items-center justify-center">
+                    <Card v-if="attachment.description" class="p-4 max-w-md max-h-48 overflow-auto">
+                        <p class="text-sm">{{ attachment.description }}</p>
+                    </Card>
+                </DialogDescription>
             </div>
-            <DialogDescription class="flex items-center justify-center">
-                <Card v-if="attachment.description" class="p-4 max-w-md max-h-48 overflow-auto">
-                    <p class="text-sm">{{ attachment.description }}</p>
-                </Card>
-            </DialogDescription>
         </DialogContent>
     </Dialog>
 </template>

components/preferences/profile/image-uploader.vue

@@ -6,7 +6,7 @@
                 variant="ghost"
                 class="h-fit w-fit p-0 m-0 relative group border overflow-hidden"
             >
-                <Avatar size="lg" :src="image" :name="displayName" />
+                <Avatar class="size-32" :src="image" :name="displayName" />
                 <div
                     class="absolute inset-0 bg-background/80 flex group-hover:opacity-100 opacity-0 duration-200 items-center justify-center"
                 >
@@ -88,7 +88,7 @@
                                     <Label>{{
                                         m.witty_honest_wallaby_support()
                                     }}</Label>
-                                    <Avatar size="lg" :src="gravatarUrl" />
+                                    <Avatar class="size-32" :src="gravatarUrl" />
                                 </div>
                             </FormItem>
                         </FormField>
@@ -114,7 +114,7 @@
                                     <Label>{{
                                         m.witty_honest_wallaby_support()
                                     }}</Label>
-                                    <Avatar size="lg" :src="value" />
+                                    <Avatar class="size-32" :src="value" />
                                 </div>
                             </FormItem>
                         </FormField>

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="size-32 border"
-                class="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"

nuxt.config.ts

@@ -33,7 +33,13 @@ export default defineNuxtConfig({
     },
     fonts: {
         families: [
-            { name: "Inter", provider: "local", weights: [400, 500, 600, 700, 800], styles: ["normal", "italic"], display: "swap" },
+            {
+                name: "Inter",
+                provider: "local",
+                weights: [400, 500, 600, 700, 800],
+                styles: ["normal", "italic"],
+                display: "swap",
+            },
         ],
     },
     pwa: {