From f5cada0be8fd64c9bccd70720d25de215d65befe Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Sat, 18 Jan 2025 18:33:07 +0900
Subject: [PATCH] style: fix broken layout "more from" badge in card with
 square image (#3141)

---
 .../StatusPreviewCardMoreFromAuthor.vue       |   3 +-
 components/status/StatusPreviewCardNormal.vue | 105 +++++++++---------
 2 files changed, 56 insertions(+), 52 deletions(-)

diff --git a/components/status/StatusPreviewCardMoreFromAuthor.vue b/components/status/StatusPreviewCardMoreFromAuthor.vue
index ffc1f368..ff93a498 100644
--- a/components/status/StatusPreviewCardMoreFromAuthor.vue
+++ b/components/status/StatusPreviewCardMoreFromAuthor.vue
@@ -11,7 +11,8 @@ defineProps<{
     max-h-2xl
     flex gap-2
     my-auto
-    bg-gray-300
+    p-4 py-2
+    light:bg-gray-3 dark:bg-gray-8
   >
     <span z-0>More from</span>
     <AccountInlineInfo :account="account" hover:bg-gray-300 />
diff --git a/components/status/StatusPreviewCardNormal.vue b/components/status/StatusPreviewCardNormal.vue
index 98edce20..15d796ba 100644
--- a/components/status/StatusPreviewCardNormal.vue
+++ b/components/status/StatusPreviewCardNormal.vue
@@ -45,69 +45,72 @@ function loadAttachment() {
     bg-card
     hover:bg-active
     :class="{
-      'flex': isSquare,
+      'flex flex-col': isSquare,
       'p-4': root,
       'rounded-lg': !root,
     }"
     target="_blank"
     external
   >
-    <div
-      v-if="card.image"
-      flex flex-col
-      display-block of-hidden
-      :class="{
-        '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,
-      }"
-      relative
-    >
-      <CommonBlurhash
-        :blurhash="card.blurhash"
-        :src="card.image"
-        :width="card.width"
-        :height="card.height"
-        :alt="alt"
-        :should-load-image="shouldLoadAttachment"
-        w-full h-full object-cover
-        :class="!shouldLoadAttachment ? 'brightness-60' : ''"
-      />
-      <button
-        v-if="!shouldLoadAttachment"
-        type="button"
-        absolute
-        class="status-preview-card-load bg-black/64"
-        p-2
-        transition
-        rounded
-        hover:bg-black
-        cursor-pointer
-        @click.stop.prevent="!shouldLoadAttachment ? loadAttachment() : null"
+    <div :class="isSquare ? 'flex' : ''">
+      <!-- image -->
+      <div
+        v-if="card.image"
+        flex flex-col
+        display-block of-hidden
+        :class="{
+          '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,
+        }"
+        relative
       >
-        <span
-          text-sm
-          text-white
-          flex flex-col justify-center items-center
-          gap-3 w-6 h-6
-          i-ri:file-download-line
+        <CommonBlurhash
+          :blurhash="card.blurhash"
+          :src="card.image"
+          :width="card.width"
+          :height="card.height"
+          :alt="alt"
+          :should-load-image="shouldLoadAttachment"
+          w-full h-full object-cover
+          :class="!shouldLoadAttachment ? 'brightness-60' : ''"
         />
-      </button>
+        <button
+          v-if="!shouldLoadAttachment"
+          type="button"
+          absolute
+          class="status-preview-card-load bg-black/64"
+          p-2
+          transition
+          rounded
+          hover:bg-black
+          cursor-pointer
+          @click.stop.prevent="!shouldLoadAttachment ? loadAttachment() : null"
+        >
+          <span
+            text-sm
+            text-white
+            flex flex-col justify-center items-center
+            gap-3 w-6 h-6
+            i-ri:file-download-line
+          />
+        </button>
+      </div>
+      <div
+        v-else
+        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>
+      <!-- description -->
+      <StatusPreviewCardInfo :p="isSquare ? 'x-4' : '4'" :root="root" :card="card" :provider="providerName" />
     </div>
-    <div
-      v-else
-      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 :p="isSquare ? 'x-4' : '4'" :root="root" :card="card" :provider="providerName" />
     <StatusPreviewCardMoreFromAuthor
       v-if="card?.authors?.[0].account"
       :account="card.authors[0].account"
-      p-4 py-2
     />
   </NuxtLink>
 </template>