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,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
+    <div :class="isSquare ? 'flex' : ''">
-      v-if="card.image"
+      <!-- image -->
-      flex flex-col
+      <div
-      display-block of-hidden
+        v-if="card.image"
-      :class="{
+        flex flex-col
-        'sm:(min-w-32 w-32 h-32) min-w-24 w-24 h-24': isSquare,
+        display-block of-hidden
-        'w-full aspect-[1.91]': !isSquare,
+        :class="{
-        'rounded-lg': root,
+          'sm:(min-w-32 w-32 h-32) min-w-24 w-24 h-24': isSquare,
-      }"
+          'w-full aspect-[1.91]': !isSquare,
-      relative
+          'rounded-lg': root,
-    >
+        }"
-      <CommonBlurhash
+        relative
-        :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"
       >
-        <span
+        <CommonBlurhash
-          text-sm
+          :blurhash="card.blurhash"
-          text-white
+          :src="card.image"
-          flex flex-col justify-center items-center
+          :width="card.width"
-          gap-3 w-6 h-6
+          :height="card.height"
-          i-ri:file-download-line
+          :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>