From de5bb010638d45e6efe4be56e704eea0b842fd60 Mon Sep 17 00:00:00 2001
From: Arjan Singh <arjan@comfy.org>
Date: Tue, 16 Sep 2025 18:59:55 -0700
Subject: [PATCH] [fix] better reponsive layout

---
 .../assets/components/AssetBrowserModal.stories.ts        | 2 +-
 src/platform/assets/components/AssetBrowserModal.vue      | 1 -
 src/platform/assets/components/AssetGrid.vue              | 8 +++++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/platform/assets/components/AssetBrowserModal.stories.ts b/src/platform/assets/components/AssetBrowserModal.stories.ts
index 25d4916c7..f9c2b4398 100644
--- a/src/platform/assets/components/AssetBrowserModal.stories.ts
+++ b/src/platform/assets/components/AssetBrowserModal.stories.ts
@@ -88,7 +88,7 @@ export const SingleAssetType: Story = {
     nodeType: 'CheckpointLoaderSimple',
     inputName: 'ckpt_name',
     currentValue: '',
-    showLeftPanel: undefined
+    showLeftPanel: false
   },
   render: (args) => ({
     components: { AssetBrowserModal },
diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
index 3faa2b63b..9541b416f 100644
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -29,7 +29,6 @@
 
     <template #content>
       <AssetGrid
-        :class="{ 'max-w-5xl': !shouldShowLeftPanel }"
         :assets="filteredAssets"
         @asset-select="handleAssetSelectAndEmit"
       />
diff --git a/src/platform/assets/components/AssetGrid.vue b/src/platform/assets/components/AssetGrid.vue
index 63733b653..b39c78ec0 100644
--- a/src/platform/assets/components/AssetGrid.vue
+++ b/src/platform/assets/components/AssetGrid.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     data-component-id="AssetGrid"
-    class="grid grid-cols-2 md:grid-cols-4 gap-6 p-8"
+    :style="gridStyle"
     role="grid"
     aria-label="Asset collection"
     :aria-rowcount="-1"
@@ -49,7 +49,10 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
+import { createGridStyle } from '@/utils/gridUtil'
 import { cn } from '@/utils/tailwindUtil'
 
 import AssetCard from './AssetCard.vue'
@@ -62,4 +65,7 @@ defineProps<{
 defineEmits<{
   assetSelect: [asset: AssetDisplayItem]
 }>()
+
+// Use same grid style as BaseModalLayout
+const gridStyle = computed(() => createGridStyle())
 </script>