Better combo menu width handling

src/lib/nodes/widgets/ComfyComboNode.ts

@@ -41,6 +41,7 @@ export default class ComfyComboNode extends ComfyWidgetNode<string> {
     firstLoad: Writable<boolean>;
     lightUp: Writable<boolean>;
     valuesForCombo: Writable<any[]>; // 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<string> {
         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<string> {
         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
                 }
             })

src/lib/widgets/ComboWidget.svelte

@@ -169,7 +169,7 @@
             on:select={(e) => handleSelect(e.detail.index)}
             on:blur
             on:filter={onFilter}>
-            <div class="comfy-select-list" slot="list" let:filteredItems>
+            <div class="comfy-select-list" slot="list" let:filteredItems style:--maxLabelWidth={node.maxLabelWidthChars || 100}>
                 {#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) {