From d63a70474b47db583f675c0a6d1c5a4c50071405 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Tue, 11 Mar 2025 14:45:50 +0800
Subject: [PATCH] Improve height calculation for tags widget to handle empty
 states and dynamic content

---
 web/comfyui/tags_widget.js | 39 +++++++++++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/web/comfyui/tags_widget.js b/web/comfyui/tags_widget.js
index a4b83f0c..d43cb016 100644
--- a/web/comfyui/tags_widget.js
+++ b/web/comfyui/tags_widget.js
@@ -142,13 +142,38 @@ export function addTagsWidget(node, name, opts, callback) {
       });
     },
     getMinHeight: function() {
-      // Calculate height based on content with minimal extra space
-      // Use a small buffer instead of explicit padding calculation
-      const buffer = 10; // Small buffer to ensure no overflow
-      return Math.max(
-        150,
-        Math.ceil((container.scrollHeight + buffer) / 5) * 5 // Round up to nearest 5px
-      );
+      const minHeight = 150;
+      // If no tags or only showing the empty message, return a minimum height
+      if (widgetValue.length === 0) {
+        return minHeight; // Height for empty state with message
+      }
+      
+      // Get all tag elements
+      const tagElements = container.querySelectorAll('.comfy-tag');
+      
+      if (tagElements.length === 0) {
+        return minHeight; // Fallback if elements aren't rendered yet
+      }
+      
+      // Calculate the actual height based on tag positions
+      let maxBottom = 0;
+      
+      tagElements.forEach(tag => {
+        const rect = tag.getBoundingClientRect();
+        const tagBottom = rect.bottom - container.getBoundingClientRect().top;
+        maxBottom = Math.max(maxBottom, tagBottom);
+      });
+      
+      // Add padding (top and bottom padding of container)
+      const computedStyle = window.getComputedStyle(container);
+      const paddingTop = parseInt(computedStyle.paddingTop, 10) || 0;
+      const paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0;
+      
+      // Add extra buffer for potential wrapping issues and to ensure no clipping
+      const extraBuffer = 20;
+      
+      // Round up to nearest 5px for clean sizing and ensure minimum height
+      return Math.max(minHeight, Math.ceil((maxBottom + paddingBottom + extraBuffer) / 5) * 5);
     },
   });