diff --git a/src/lib/nodes/widgets/ComfyComboNode.ts b/src/lib/nodes/widgets/ComfyComboNode.ts index 5373298..85ba08b 100644 --- a/src/lib/nodes/widgets/ComfyComboNode.ts +++ b/src/lib/nodes/widgets/ComfyComboNode.ts @@ -41,6 +41,7 @@ export default class ComfyComboNode extends ComfyWidgetNode { firstLoad: Writable; lightUp: Writable; valuesForCombo: Writable; // Changed when the combo box has values. + maxLabelWidthChars: number = 0; constructor(name?: string) { super(name, "A") @@ -77,13 +78,17 @@ export default class ComfyComboNode extends ComfyWidgetNode { else formatter = (value: any) => `${value}`; + this.maxLabelWidthChars = 0; + let valuesForCombo = [] try { valuesForCombo = this.properties.values.map((value, index) => { + const label = formatter(value); + this.maxLabelWidthChars = Math.max(this.maxLabelWidthChars, label.length) return { value, - label: formatter(value), + label, index } }) @@ -91,9 +96,11 @@ export default class ComfyComboNode extends ComfyWidgetNode { catch (err) { console.error("Failed formatting!", err) valuesForCombo = this.properties.values.map((value, index) => { + const label = `${value}` + this.maxLabelWidthChars = Math.max(this.maxLabelWidthChars, label.length) return { value, - label: `${value}`, + label, index } }) diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte index 18496a6..d0270ef 100644 --- a/src/lib/widgets/ComboWidget.svelte +++ b/src/lib/widgets/ComboWidget.svelte @@ -169,7 +169,7 @@ on:select={(e) => handleSelect(e.detail.index)} on:blur on:filter={onFilter}> -
+
{#if filteredItems.length > 0} {@const itemSize = isMobile ? 50 : 25} {@const itemsToShow = isMobile ? 10 : 30} @@ -286,7 +286,9 @@ } .comfy-select-list { - width: 30rem; + --maxLabelWidth: 100; + font-size: 14px; + width: min(calc((var(--maxLabelWidth) + 10) * 1ch), 50vw); color: var(--item-color); > :global(.virtual-list-wrapper) {