From 689ae0c701c052abe11c586ce2035d3a25afe04f Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ramon.aycojr@gmail.com>
Date: Wed, 11 Jan 2023 20:08:15 +0100
Subject: [PATCH] fix: top and bottom padding of small preview card on mobile
 (#974)

---
 components/status/StatusPreviewCard.vue     | 6 +++---
 components/status/StatusPreviewCardInfo.vue | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/status/StatusPreviewCard.vue b/components/status/StatusPreviewCard.vue
index ba32154d..94192428 100644
--- a/components/status/StatusPreviewCard.vue
+++ b/components/status/StatusPreviewCard.vue
@@ -54,7 +54,7 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
       flex flex-col
       display-block of-hidden
       :class="{
-        'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22': isSquare,
+        'sm:(min-w-32 w-32 h-32) min-w-24 w-24 h-24': isSquare,
         'w-full aspect-[1.91]': !isSquare,
         'rounded-lg': root,
       }"
@@ -70,13 +70,13 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
     </div>
     <div
       v-else
-      min-w-22 w-22 h-22 sm="min-w-32 w-32 h-32" bg="slate-500/10" flex justify-center items-center
+      min-w-24 w-24 h-24 sm="min-w-32 w-32 h-32" bg="slate-500/10" flex justify-center items-center
       :class="[
         root ? 'rounded-lg' : '',
       ]"
     >
       <div :class="cardTypeIconMap[card.type]" w="30%" h="30%" text-secondary />
     </div>
-    <StatusPreviewCardInfo :root="root" :card="card" :provider="providerName" />
+    <StatusPreviewCardInfo :p="isSquare ? 'x-4' : '4'" :root="root" :card="card" :provider="providerName" />
   </NuxtLink>
 </template>
diff --git a/components/status/StatusPreviewCardInfo.vue b/components/status/StatusPreviewCardInfo.vue
index 0da9a402..1ebf6973 100644
--- a/components/status/StatusPreviewCardInfo.vue
+++ b/components/status/StatusPreviewCardInfo.vue
@@ -12,12 +12,12 @@ defineProps<{
 
 <template>
   <div
-    p4 max-h-2xl
+    max-h-2xl
     flex flex-col
+    my-auto
     :class="[
       root ? 'flex-gap-1' : 'justify-center sm:justify-start',
     ]"
-    my-auto
   >
     <p text-secondary ws-pre-wrap break-all line-clamp-1>
       {{ provider }}