From 4b67f6ab9a75ea751b410cba5b74a0fc7bc470b9 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Tue, 31 Dec 2024 15:28:05 +0100
Subject: [PATCH] fix: :lipstick: Fix a few attachment layout issues

---
 components/notes/attachment.vue  | 6 +++---
 components/notes/attachments.vue | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/notes/attachment.vue b/components/notes/attachment.vue
index 3d33d3c..92bc53c 100644
--- a/components/notes/attachment.vue
+++ b/components/notes/attachment.vue
@@ -10,7 +10,7 @@
             <audio v-else-if="attachment.type === 'audio'" :src="attachment.url"
                 :alt="attachment.description ?? undefined" class="w-full h-full object-cover bg-muted/20" controls />
             <DialogTrigger v-else :as-child="true">
-                <div class="w-full h-full flex flex-col items-center justify-center bg-muted/20">
+                <div class="w-full h-full flex flex-col items-center justify-center bg-muted/20 min-h-48">
                     <File class="size-12" />
                     <span class="text-sm"></span>
                 </div>
@@ -43,7 +43,7 @@
                     </Button>
                 </DialogClose>
             </div>
-            <div class="flex items-center justify-center overflow-hidden *:max-h-[80vh] *:max-w-[80vh]">
+            <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"
@@ -82,4 +82,4 @@ import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 defineProps<{
     attachment: Attachment;
 }>();
-</script>
\ No newline at end of file
+</script>
diff --git a/components/notes/attachments.vue b/components/notes/attachments.vue
index 60ee7d6..c0f50f2 100644
--- a/components/notes/attachments.vue
+++ b/components/notes/attachments.vue
@@ -1,7 +1,7 @@
 <template>
     <!-- [&:has(>:last-child:nth-child(1))] means "when this element has 1 child" -->
-    <div class="mt-4 grid gap-4 grid-cols-2 *:max-h-56 sm:[&:has(>:last-child:nth-child(1))]:grid-cols-1 sm:[&:has(>:last-child:nth-child(1))>*]:max-h-72">
-        <Attachment v-for="attachment in attachments" :key="attachment.id" :attachment="attachment" />    
+    <div class="mt-4 grid gap-4 grid-cols-2 *:max-h-56 [&:has(>:last-child:nth-child(1))]:grid-cols-1 sm:[&:has(>:last-child:nth-child(1))>*]:max-h-72">
+        <Attachment v-for="attachment in attachments" :key="attachment.id" :attachment="attachment" />
     </div>
 </template>
 
@@ -12,4 +12,4 @@ import Attachment from "./attachment.vue";
 defineProps<{
     attachments: AttachmentType[];
 }>();
-</script>
\ No newline at end of file
+</script>