diff --git a/web/comfyui/lm_styles.css b/web/comfyui/lm_styles.css index 556bdcfc..ffb6b249 100644 --- a/web/comfyui/lm_styles.css +++ b/web/comfyui/lm_styles.css @@ -133,6 +133,14 @@ outline: none; } +/* Vue node mode: prevent content from pushing node size via ResizeObserver. + Same technique as .lm-loras-container.lm-vue-node above. */ +.comfy-tags-container.lm-vue-node { + height: 100%; + min-height: var(--comfy-widget-min-height, 150px); + contain: layout size; +} + .lm-lora-empty-state { text-align: center; padding: 20px 0; diff --git a/web/comfyui/tags_widget.js b/web/comfyui/tags_widget.js index 4b170837..9ae2a4a5 100644 --- a/web/comfyui/tags_widget.js +++ b/web/comfyui/tags_widget.js @@ -1,6 +1,7 @@ import { app } from "../../scripts/app.js"; import { forwardMiddleMouseToCanvas, forwardWheelToCanvas } from "./utils.js"; import { copyToClipboard } from "./loras_widget_utils.js"; +import { ensureLmStyles } from "./lm_styles_loader.js"; const MIN_HEIGHT = 150; const GROUP_EDITOR_ID = "lm-trigger-group-editor"; @@ -696,6 +697,16 @@ export function addTagsWidget(node, name, opts, callback, wheelSensitivity = 0.0 outline: "none", }); + // Set a fixed minimum height so the node has a reasonable starting size. + // Adding or removing tags does NOT change the node size — the container + // scrolls when content exceeds the allocated space. + ensureLmStyles(); + container.style.setProperty("--comfy-widget-min-height", `${MIN_HEIGHT}px`); + + if (typeof LiteGraph !== "undefined" && LiteGraph.vueNodesMode) { + container.classList.add("lm-vue-node"); + } + const initialTagsData = opts?.defaultVal || []; function renderSimpleTag(tagData, index, widget, showStrengthInfo) {