fix: status media display (#421)

components/status/StatusAttachment.vue

@@ -2,9 +2,13 @@
 import { clamp } from '@vueuse/core'
 import type { Attachment } from 'masto'
 
-const { attachment } = defineProps<{
+const {
+  attachment,
+  fullSize = false,
+} = defineProps<{
   attachment: Attachment
   attachments?: Attachment[]
+  fullSize?: boolean
 }>()
 
 const src = $computed(() => attachment.previewUrl || attachment.url || attachment.remoteUrl!)
@@ -23,8 +27,10 @@ const rawAspectRatio = computed(() => {
 })
 
 const aspectRatio = computed(() => {
+  if (fullSize)
+    return rawAspectRatio.value
   if (rawAspectRatio.value)
-    return clamp(rawAspectRatio.value, 0.5, 2)
+    return clamp(rawAspectRatio.value, 0.8, 1.5)
   return undefined
 })
 
@@ -54,7 +60,7 @@ const type = $computed(() => {
 </script>
 
 <template>
-  <div relative>
+  <div relative ma flex>
     <template v-if="type === 'video'">
       <video
         :poster="attachment.previewUrl"
@@ -98,6 +104,8 @@ const type = $computed(() => {
         focus:outline-none
         focus:ring="2 primary inset"
         rounded-lg
+        h-full
+        w-full
         aria-label="Open image preview dialog"
         @click="openMediaPreview(attachments ? attachments : [attachment], attachments?.indexOf(attachment) || 0)"
       >
@@ -121,8 +129,8 @@ const type = $computed(() => {
         />
       </button>
     </template>
-    <div absolute left-2 class="bottom-3.5">
-      <VDropdown v-if="attachment.description" :distance="6" placement="bottom-start">
+    <div v-if="attachment.description" absolute left-2 class="bottom-2">
+      <VDropdown :distance="6" placement="bottom-start">
         <button font-bold text-sm hover:bg-black class="bg-black/65 px1.2 py0.2" rounded-1 text-white>
           <div hidden>
             read image description