style: fix broken layout "more from" badge in card with square image (#3141)

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 />

components/status/StatusPreviewCardNormal.vue

@@ -45,13 +45,15 @@ function loadAttachment() {
     bg-card
     hover:bg-active
     :class="{
-      'flex': isSquare,
+      'flex flex-col': isSquare,
       'p-4': root,
       'rounded-lg': !root,
     }"
     target="_blank"
     external
   >
+    <div :class="isSquare ? 'flex' : ''">
+      <!-- image -->
       <div
         v-if="card.image"
         flex flex-col
@@ -103,11 +105,12 @@ function loadAttachment() {
       >
         <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>
     <StatusPreviewCardMoreFromAuthor
       v-if="card?.authors?.[0].account"
       :account="card.authors[0].account"
-      p-4 py-2
     />
   </NuxtLink>
 </template>