alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-25 15:15:44 -03:00
Code Issues Packages Projects Releases Wiki Activity

fix: adjust widget heights and padding for improved layout and text alignment

Browse Source
This commit is contained in:
Will Miao
2025-06-20 17:21:31 +08:00
parent aa34c4c84c
commit 1ef88140e3
2 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/comfyui/json_display_widget.js
View File

@@ -120,7 +120,8 @@ export function addJsonDisplayWidget(node, name, opts) {
return parseInt(container.style.getPropertyValue('--comfy-widget-max-height')) || defaultHeight * 2; return parseInt(container.style.getPropertyValue('--comfy-widget-max-height')) || defaultHeight * 2;
}, },
getHeight: function() { 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 hideOnZoom: true
}); });
@@ -141,7 +142,8 @@ export function addJsonDisplayWidget(node, name, opts) {
// Adjust container height to node height // Adjust container height to node height
if(size && size[1]) { 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.maxHeight = `${widgetHeight}px`;
container.style.setProperty('--comfy-widget-height', `${widgetHeight}px`); container.style.setProperty('--comfy-widget-height', `${widgetHeight}px`);
} }

20
web/comfyui/tags_widget.js
View File

@@ -131,7 +131,7 @@ export function addTagsWidget(node, name, opts, callback) {
// Helper function to update tag style based on active state // Helper function to update tag style based on active state
function updateTagStyle(tagEl, active) { function updateTagStyle(tagEl, active) {
const baseStyles = { const baseStyles = {
padding: "4px 10px", // Slightly reduced horizontal padding padding: "3px 10px", // Adjusted vertical padding to balance text
borderRadius: "6px", borderRadius: "6px",
maxWidth: "200px", maxWidth: "200px",
overflow: "hidden", overflow: "hidden",
@@ -141,18 +141,22 @@ export function addTagsWidget(node, name, opts, callback) {
cursor: "pointer", cursor: "pointer",
transition: "all 0.2s ease", transition: "all 0.2s ease",
border: "1px solid transparent", border: "1px solid transparent",
display: "inline-flex", // Changed to inline-flex for better text alignment display: "inline-block", // inline-block for better text truncation
alignItems: "center", // Center text vertically
justifyContent: "center", // Center text horizontally
boxShadow: "0 1px 2px rgba(0,0,0,0.1)", boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
margin: "1px", // Reduced margin margin: "1px",
userSelect: "none", userSelect: "none",
WebkitUserSelect: "none", WebkitUserSelect: "none",
MozUserSelect: "none", MozUserSelect: "none",
msUserSelect: "none", msUserSelect: "none",
height: "20px", // Slightly increased height to prevent text cutoff height: "22px", // Increased height to better fit text with descenders
minHeight: "20px", // Ensure consistent height minHeight: "22px", // Matching minHeight
boxSizing: "border-box" // Ensure padding doesn't affect the overall size 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) { if (active) {