mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-09 07:00:06 +00:00
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:
@@ -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="{
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user