From 1ef88140e3adb39a1390cc45323d544dc8cf2c35 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Fri, 20 Jun 2025 17:21:31 +0800
Subject: [PATCH] fix: adjust widget heights and padding for improved layout
 and text alignment

---
 web/comfyui/json_display_widget.js |  6 ++++--
 web/comfyui/tags_widget.js         | 22 +++++++++++++---------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/web/comfyui/json_display_widget.js b/web/comfyui/json_display_widget.js
index f1bbf816..52d03f54 100644
--- a/web/comfyui/json_display_widget.js
+++ b/web/comfyui/json_display_widget.js
@@ -120,7 +120,8 @@ export function addJsonDisplayWidget(node, name, opts) {
       return parseInt(container.style.getPropertyValue('--comfy-widget-max-height')) || defaultHeight * 2;
     },
     getHeight: function() {
-      return defaultHeight; // Fixed height to maintain node boundaries
+      // Return actual container height to reduce the gap
+      return parseInt(container.style.getPropertyValue('--comfy-widget-height')) || defaultHeight;
     },
     hideOnZoom: true
   });
@@ -141,7 +142,8 @@ export function addJsonDisplayWidget(node, name, opts) {
     
     // Adjust container height to node height
     if(size && size[1]) {
-      const widgetHeight = Math.min(size[1] - 80, defaultHeight * 2); // Account for node header
+      // Reduce the offset to minimize the gap at the bottom
+      const widgetHeight = Math.min(size[1] - 30, defaultHeight * 2); // Reduced from 80 to 30
       container.style.maxHeight = `${widgetHeight}px`;
       container.style.setProperty('--comfy-widget-height', `${widgetHeight}px`);
     }
diff --git a/web/comfyui/tags_widget.js b/web/comfyui/tags_widget.js
index eec0755b..e71a5627 100644
--- a/web/comfyui/tags_widget.js
+++ b/web/comfyui/tags_widget.js
@@ -131,7 +131,7 @@ export function addTagsWidget(node, name, opts, callback) {
   // Helper function to update tag style based on active state
   function updateTagStyle(tagEl, active) {
     const baseStyles = {
-      padding: "4px 10px", // Slightly reduced horizontal padding
+      padding: "3px 10px", // Adjusted vertical padding to balance text
       borderRadius: "6px",
       maxWidth: "200px",
       overflow: "hidden",
@@ -141,18 +141,22 @@ export function addTagsWidget(node, name, opts, callback) {
       cursor: "pointer",
       transition: "all 0.2s ease",
       border: "1px solid transparent",
-      display: "inline-flex", // Changed to inline-flex for better text alignment
-      alignItems: "center", // Center text vertically
-      justifyContent: "center", // Center text horizontally
+      display: "inline-block", // inline-block for better text truncation
       boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
-      margin: "1px", // Reduced margin
+      margin: "1px", 
       userSelect: "none",
       WebkitUserSelect: "none",
       MozUserSelect: "none",
       msUserSelect: "none",
-      height: "20px", // Slightly increased height to prevent text cutoff
-      minHeight: "20px", // Ensure consistent height
-      boxSizing: "border-box" // Ensure padding doesn't affect the overall size
+      height: "22px", // Increased height to better fit text with descenders
+      minHeight: "22px", // Matching minHeight
+      boxSizing: "border-box",
+      width: "fit-content",
+      maxWidth: "200px",
+      lineHeight: "16px", // Added explicit line-height
+      verticalAlign: "middle", // Added vertical alignment
+      position: "relative", // For better text positioning
+      textAlign: "center", // Center text horizontally
     };
 
     if (active) {
@@ -225,4 +229,4 @@ export function addTagsWidget(node, name, opts, callback) {
   };
 
   return { minWidth: 300, minHeight: defaultHeight, widget };
-} 
\ No newline at end of file
+}
\ No newline at end of file