From 23ab9244050d7b5df48f493a50c6b9d8aab4d208 Mon Sep 17 00:00:00 2001
From: Terry Jia <terryjia88@gmail.com>
Date: Sat, 6 Dec 2025 15:42:14 -0500
Subject: [PATCH] fix: add fixed min-width to sidebar panels to prevent content
 clipping (#7212)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

The default 10% min-size is too small for panels like Media Assets,
causing content to be clipped.
Use a fixed minimum width to ensure the panel content displays properly.

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7210

## Screenshots


https://github.com/user-attachments/assets/65a15f0f-45c1-4361-adc9-eee4ccfad0ee

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7212-fix-add-fixed-min-width-to-sidebar-panels-to-prevent-content-clipping-2c16d73d365081d8a5a4de30c8eb5e07)
by [Unito](https://www.unito.io)
---
 src/components/LiteGraphCanvasSplitterOverlay.vue | 14 ++++++++++++--
 src/components/sidebar/tabs/AssetsSidebarTab.vue  |  6 ++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/LiteGraphCanvasSplitterOverlay.vue b/src/components/LiteGraphCanvasSplitterOverlay.vue
index 830fdf1fc8..4d56e623b7 100644
--- a/src/components/LiteGraphCanvasSplitterOverlay.vue
+++ b/src/components/LiteGraphCanvasSplitterOverlay.vue
@@ -24,7 +24,12 @@
       >
         <SplitterPanel
           v-if="sidebarLocation === 'left' && !focusMode"
-          class="side-bar-panel bg-comfy-menu-bg pointer-events-auto"
+          :class="
+            cn(
+              'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
+              sidebarPanelVisible && 'min-w-78'
+            )
+          "
           :min-size="10"
           :size="20"
           :style="{
@@ -70,7 +75,12 @@
 
         <SplitterPanel
           v-if="sidebarLocation === 'right' && !focusMode"
-          class="side-bar-panel pointer-events-auto"
+          :class="
+            cn(
+              'side-bar-panel pointer-events-auto',
+              sidebarPanelVisible && 'min-w-78'
+            )
+          "
           :min-size="10"
           :size="20"
           :style="{
diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index b9e9e05ae0..2d3b57b011 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -257,9 +257,11 @@ useResizeObserver(footerRef, (entries) => {
 })
 
 // Determine if we should show compact mode (icon only)
-// Threshold: 350px or less shows icon only
+// Threshold matches when grid switches from 2 columns to 1 column
+// 2 columns need about ~430px
+const COMPACT_MODE_THRESHOLD_PX = 430
 const isCompact = computed(
-  () => footerWidth.value > 0 && footerWidth.value <= 350
+  () => footerWidth.value > 0 && footerWidth.value <= COMPACT_MODE_THRESHOLD_PX
 )
 
 // Hover state for selection count button