fix: add fixed min-width to sidebar panels to prevent content clipping (#7212)

## 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)
This commit is contained in:
Terry Jia
2025-12-06 15:42:14 -05:00
committed by GitHub
parent a8f6bea371
commit 23ab924405
2 changed files with 16 additions and 4 deletions

View File

@@ -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="{

View File

@@ -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