From 2806aa1a904b3040db29588e379ec814aab3b124 Mon Sep 17 00:00:00 2001
From: Arjan Singh <arjan@comfy.org>
Date: Tue, 16 Sep 2025 13:08:13 -0700
Subject: [PATCH] [fix] AssetCard layout issues

---
 .../assets/components/AssetBadgeGroup.vue     |  2 +-
 .../assets/components/AssetCard.stories.ts    |  5 +-
 src/platform/assets/components/AssetCard.vue  | 52 ++++++++++---------
 src/platform/assets/components/AssetGrid.vue  | 12 ++---
 4 files changed, 32 insertions(+), 39 deletions(-)

diff --git a/src/platform/assets/components/AssetBadgeGroup.vue b/src/platform/assets/components/AssetBadgeGroup.vue
index fbefc93d6..c8d1e8427 100644
--- a/src/platform/assets/components/AssetBadgeGroup.vue
+++ b/src/platform/assets/components/AssetBadgeGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute bottom-2 right-2 flex gap-1 flex-wrap justify-end">
+  <div class="absolute bottom-2 right-2 flex flex-col-reverse items-end gap-1">
     <span
       v-for="badge in badges"
       :key="badge.label"
diff --git a/src/platform/assets/components/AssetCard.stories.ts b/src/platform/assets/components/AssetCard.stories.ts
index f4cd9f063..1c718d7d2 100644
--- a/src/platform/assets/components/AssetCard.stories.ts
+++ b/src/platform/assets/components/AssetCard.stories.ts
@@ -43,8 +43,7 @@ const meta: Meta<typeof AssetCard> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-// Default story with all data provided
-export const Default: Story = {
+export const Interactive: Story = {
   args: {
     asset: createAssetData(),
     interactive: true
@@ -59,7 +58,6 @@ export const Default: Story = {
   }
 }
 
-// Non-interactive story
 export const NonInteractive: Story = {
   args: {
     asset: createAssetData(),
@@ -75,7 +73,6 @@ export const NonInteractive: Story = {
   }
 }
 
-// Story with all edge cases in a grid layout
 export const EdgeCases: Story = {
   render: () => ({
     components: { AssetCard },
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index a0008f90e..d77f25bdd 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -29,34 +29,36 @@
   >
     <div class="relative w-full aspect-square overflow-hidden">
       <div
-        class="w-full h-full bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-600"
+        class="w-full h-full bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-600 flex items-center justify-center"
       ></div>
       <AssetBadgeGroup :badges="asset.badges" />
     </div>
-    <div class="p-4">
-      <h3
-        :class="
-          cn(
-            'mb-2 m-0 text-base font-semibold overflow-hidden text-ellipsis whitespace-nowrap',
-            'text-slate-800',
-            'dark-theme:text-white'
-          )
-        "
-      >
-        {{ asset.name }}
-      </h3>
-      <p
-        :class="
-          cn(
-            'mb-3 m-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]',
-            'text-stone-300',
-            'dark-theme:text-stone-200'
-          )
-        "
-        :title="asset.description"
-      >
-        {{ asset.description }}
-      </p>
+    <div class="p-4 h-32 flex flex-col justify-between">
+      <div>
+        <h3
+          :class="
+            cn(
+              'mb-2 m-0 text-base font-semibold overflow-hidden text-ellipsis whitespace-nowrap',
+              'text-slate-800',
+              'dark-theme:text-white'
+            )
+          "
+        >
+          {{ asset.name }}
+        </h3>
+        <p
+          :class="
+            cn(
+              'm-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]',
+              'text-stone-300',
+              'dark-theme:text-stone-200'
+            )
+          "
+          :title="asset.description"
+        >
+          {{ asset.description }}
+        </p>
+      </div>
       <div
         :class="
           cn(
diff --git a/src/platform/assets/components/AssetGrid.vue b/src/platform/assets/components/AssetGrid.vue
index 4b0f71502..63733b653 100644
--- a/src/platform/assets/components/AssetGrid.vue
+++ b/src/platform/assets/components/AssetGrid.vue
@@ -9,12 +9,11 @@
     :aria-setsize="assets.length"
   >
     <AssetCard
-      v-for="(asset, index) in assets"
+      v-for="asset in assets"
       :key="asset.id"
       :asset="asset"
       :interactive="true"
       role="gridcell"
-      :aria-posinset="index + 1"
       @select="$emit('assetSelect', $event)"
     />
 
@@ -24,8 +23,7 @@
       :class="
         cn(
           'col-span-full flex flex-col items-center justify-center py-16',
-          'text-stone-300',
-          'dark-theme:text-stone-200'
+          'text-stone-300 dark-theme:text-stone-200'
         )
       "
     >
@@ -43,11 +41,7 @@
     >
       <i-lucide:loader
         :class="
-          cn(
-            'size-6 animate-spin',
-            'text-stone-300',
-            'dark-theme:text-stone-200'
-          )
+          cn('size-6 animate-spin', 'text-stone-300 dark-theme:text-stone-200')
         "
       />
     </div>