From 9a29e124e94554cb1e73bf27a71a99cba6c228bf Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 27 May 2023 23:52:01 -0500
Subject: [PATCH] Better combo menu width handling

---
 src/lib/nodes/widgets/ComfyComboNode.ts | 11 +++++++++--
 src/lib/widgets/ComboWidget.svelte      |  6 ++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

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<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
                 }
             })
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}>
-            <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) {