mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-24 06:32:12 -03:00
fix: adjust widget heights and padding for improved layout and text alignment
This commit is contained in:
@@ -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`);
|
||||
}
|
||||
|
||||
@@ -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 };
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user