From ff3ebc2871124f3192de6f566cde2570dfb3c1f0 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ramon.aycojr@gmail.com>
Date: Wed, 7 Dec 2022 20:13:33 +0100
Subject: [PATCH] feat: handle square preview cards (#363)

---
 components/status/StatusPreviewCard.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/status/StatusPreviewCard.vue b/components/status/StatusPreviewCard.vue
index 7aefd433..1c0403fc 100644
--- a/components/status/StatusPreviewCard.vue
+++ b/components/status/StatusPreviewCard.vue
@@ -5,6 +5,7 @@ const prop = defineProps<{
   card: Card
 }>()
 const alt = $computed(() => `${prop.card.title} - ${prop.card.title}`)
+const isSquare = $computed(() => prop.card.width === prop.card.height)
 
 // TODO: handle card.type: 'photo' | 'video' | 'rich';
 </script>
@@ -16,7 +17,7 @@ const alt = $computed(() => `${prop.card.title} - ${prop.card.title}`)
     display-block
     rounded-lg
   >
-    <NuxtLink display-block :to="card.url">
+    <NuxtLink display-block :to="card.url" :class="{ flex: isSquare }">
       <CommonBlurhash
         v-if="card.image"
         :blurhash="card.blurhash"
@@ -24,13 +25,16 @@ const alt = $computed(() => `${prop.card.title} - ${prop.card.title}`)
         :width="card.width"
         :height="card.height"
         :alt="alt"
+        flex flex-col
         display-block
         rounded-lg
-        rounded-b-none
+        :class="isSquare ? 'rounded-r-none w-32' : 'rounded-b-none w-full'"
         object-cover
-        w-full
       />
-      <div p4 max-h-2xl>
+      <div
+        p4 max-h-2xl
+        flex flex-col
+      >
         <p v-if="card.providerName" text-secondary line-clamp-1 text-ellipsis>
           {{ card.providerName }}
         </p>