From f7fe476cd4cf325369ab6325f04de562c6afaec2 Mon Sep 17 00:00:00 2001
From: Arjan Singh <arjan@comfy.org>
Date: Tue, 16 Sep 2025 14:42:32 -0700
Subject: [PATCH] [fix] modal layout

---
 .../assets/components/AssetBrowserModal.vue   |  5 +-
 .../composables/useAssetBrowserDialog.ts      |  7 +--
 .../components/AssetBrowserModal.test.ts      | 56 +++++++------------
 3 files changed, 25 insertions(+), 43 deletions(-)

diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
index 0ddbd85b1..3faa2b63b 100644
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -29,6 +29,7 @@
 
     <template #content>
       <AssetGrid
+        :class="{ 'max-w-5xl': !shouldShowLeftPanel }"
         :assets="filteredAssets"
         @asset-select="handleAssetSelectAndEmit"
       />
@@ -78,9 +79,9 @@ const {
   selectAsset
 } = useAssetBrowser(assetsToUse)
 
-// Compute whether to show left panel
+// Dialog controls panel visibility via prop
 const shouldShowLeftPanel = computed(() => {
-  return props.showLeftPanel ?? availableCategories.value.length >= 3
+  return props.showLeftPanel ?? true
 })
 
 // Handle close button - call both the prop callback and emit the event
diff --git a/src/platform/assets/composables/useAssetBrowserDialog.ts b/src/platform/assets/composables/useAssetBrowserDialog.ts
index dfacd83eb..f7f34a9be 100644
--- a/src/platform/assets/composables/useAssetBrowserDialog.ts
+++ b/src/platform/assets/composables/useAssetBrowserDialog.ts
@@ -38,14 +38,13 @@ export const useAssetBrowserDialog = () => {
       closable: false,
       pt: {
         root: {
-          class:
-            'rounded-2xl overflow-hidden h-[80vh] w-[80vw] max-h-[80vh] max-w-[80vw]'
+          class: 'rounded-2xl overflow-hidden'
         },
         header: {
-          class: 'p-0! hidden'
+          class: 'p-0 hidden'
         },
         content: {
-          class: 'p-0! m-0! h-full w-full'
+          class: 'p-0 m-0 h-full w-full'
         }
       }
     }
diff --git a/tests-ui/platform/assets/components/AssetBrowserModal.test.ts b/tests-ui/platform/assets/components/AssetBrowserModal.test.ts
index 0d110b60d..4e96dd902 100644
--- a/tests-ui/platform/assets/components/AssetBrowserModal.test.ts
+++ b/tests-ui/platform/assets/components/AssetBrowserModal.test.ts
@@ -1,6 +1,6 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
 import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
@@ -96,8 +96,6 @@ vi.mock('vue-i18n', () => ({
 }))
 
 describe('AssetBrowserModal', () => {
-  let wrapper: VueWrapper
-
   const createTestAsset = (
     id: string,
     name: string,
@@ -126,7 +124,7 @@ describe('AssetBrowserModal', () => {
     const pinia = createPinia()
     setActivePinia(pinia)
 
-    wrapper = mount(AssetBrowserModal, {
+    return mount(AssetBrowserModal, {
       props: {
         assets: assets,
         ...props
@@ -143,15 +141,8 @@ describe('AssetBrowserModal', () => {
         }
       }
     })
-    return wrapper
   }
 
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount()
-    }
-  })
-
   describe('Search Functionality', () => {
     it('filters assets when search query changes', async () => {
       const assets = [
@@ -159,7 +150,7 @@ describe('AssetBrowserModal', () => {
         createTestAsset('asset2', 'Checkpoint Model B', 'checkpoints'),
         createTestAsset('asset3', 'LoRA Model C', 'loras')
       ]
-      createWrapper(assets)
+      const wrapper = createWrapper(assets)
 
       const searchBox = wrapper.find('[data-testid="search-box"]')
 
@@ -184,7 +175,7 @@ describe('AssetBrowserModal', () => {
         createTestAsset('asset1', 'LoRA Model C', 'loras'),
         createTestAsset('asset2', 'Checkpoint Model', 'checkpoints')
       ]
-      createWrapper(assets)
+      const wrapper = createWrapper(assets)
 
       const searchBox = wrapper.find('[data-testid="search-box"]')
 
@@ -203,7 +194,7 @@ describe('AssetBrowserModal', () => {
       const assets = [
         createTestAsset('asset1', 'Checkpoint Model', 'checkpoints')
       ]
-      createWrapper(assets)
+      const wrapper = createWrapper(assets)
 
       const searchBox = wrapper.find('[data-testid="search-box"]')
 
@@ -222,7 +213,7 @@ describe('AssetBrowserModal', () => {
         createTestAsset('asset2', 'LoRA Model C', 'loras'),
         createTestAsset('asset3', 'VAE Model D', 'vae')
       ]
-      createWrapper(assets)
+      const wrapper = createWrapper(assets, { showLeftPanel: true })
 
       // Wait for Vue reactivity and component mounting
       await nextTick()
@@ -251,7 +242,7 @@ describe('AssetBrowserModal', () => {
   describe('Asset Selection', () => {
     it('emits asset-select event when asset is selected', async () => {
       const assets = [createTestAsset('asset1', 'Test Model', 'checkpoints')]
-      createWrapper(assets)
+      const wrapper = createWrapper(assets)
 
       // Click on first asset
       await wrapper.find('[data-testid="asset-asset1"]').trigger('click')
@@ -267,7 +258,7 @@ describe('AssetBrowserModal', () => {
     it('executes onSelect callback when provided', async () => {
       const onSelectSpy = vi.fn()
       const assets = [createTestAsset('asset1', 'Test Model', 'checkpoints')]
-      createWrapper(assets, { onSelect: onSelectSpy })
+      const wrapper = createWrapper(assets, { onSelect: onSelectSpy })
 
       // Click on first asset
       await wrapper.find('[data-testid="asset-asset1"]').trigger('click')
@@ -277,36 +268,25 @@ describe('AssetBrowserModal', () => {
   })
 
   describe('Left Panel Conditional Logic', () => {
-    it('hides left panel when only one category exists', () => {
+    it('hides left panel by default when showLeftPanel prop is undefined', () => {
       const singleCategoryAssets = [
         createTestAsset('single1', 'Asset 1', 'checkpoints'),
         createTestAsset('single2', 'Asset 2', 'checkpoints')
       ]
-      createWrapper(singleCategoryAssets)
+      const wrapper = createWrapper(singleCategoryAssets)
 
       expect(wrapper.find('[data-testid="left-panel"]').exists()).toBe(false)
     })
 
-    it('shows left panel when multiple categories exist', async () => {
-      const multiCategoryAssets = [
-        createTestAsset('asset1', 'Checkpoint', 'checkpoints'),
-        createTestAsset('asset2', 'LoRA', 'loras')
-      ]
-      createWrapper(multiCategoryAssets)
-
-      // Wait for Vue reactivity to compute shouldShowLeftPanel
-      await nextTick()
-
-      expect(wrapper.find('[data-testid="left-panel"]').exists()).toBe(true)
-    })
-
-    it('respects explicit showLeftPanel prop override', () => {
+    it('shows left panel when showLeftPanel prop is explicitly true', () => {
       const singleCategoryAssets = [
         createTestAsset('single1', 'Asset 1', 'checkpoints')
       ]
 
       // Force show even with single category
-      createWrapper(singleCategoryAssets, { showLeftPanel: true })
+      const wrapper = createWrapper(singleCategoryAssets, {
+        showLeftPanel: true
+      })
       expect(wrapper.find('[data-testid="left-panel"]').exists()).toBe(true)
 
       // Force hide even with multiple categories
@@ -315,8 +295,10 @@ describe('AssetBrowserModal', () => {
         createTestAsset('asset1', 'Checkpoint', 'checkpoints'),
         createTestAsset('asset2', 'LoRA', 'loras')
       ]
-      createWrapper(multiCategoryAssets, { showLeftPanel: false })
-      expect(wrapper.find('[data-testid="left-panel"]').exists()).toBe(false)
+      const wrapper2 = createWrapper(multiCategoryAssets, {
+        showLeftPanel: false
+      })
+      expect(wrapper2.find('[data-testid="left-panel"]').exists()).toBe(false)
     })
   })
 })