From 94de2d6cf0a75b485d5bc22b6ed59742573b3fb2 Mon Sep 17 00:00:00 2001
From: kenyonxu <kenyon1977@gmail.com>
Date: Tue, 21 Apr 2026 21:53:08 +0800
Subject: [PATCH] fix: fix trigger words height to 3 lines and preview area
 layout

---
 frontend/kai_civitai_lora.js | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/frontend/kai_civitai_lora.js b/frontend/kai_civitai_lora.js
index dc639f7..b7d2541 100644
--- a/frontend/kai_civitai_lora.js
+++ b/frontend/kai_civitai_lora.js
@@ -90,13 +90,19 @@ function addCivitaiWidgets(node) {
         doFetch(node, force);
     });
 
-    // Trigger words text widget (read-only display)
+    // Trigger words text widget (read-only display, fixed 3-line height)
     // Use ComfyWidgets.STRING for proper multiline <textarea> rendering
     const triggerWidget = ComfyWidgets["STRING"](node, "triggers", ["STRING", { multiline: true }], app);
     node.civitai_triggers = triggerWidget.widget;
     node.civitai_triggers.inputEl.readOnly = true;
     node.civitai_triggers.inputEl.style.border = "none";
     node.civitai_triggers.inputEl.style.backgroundColor = "transparent";
+    node.civitai_triggers.inputEl.rows = 3;
+    node.civitai_triggers.inputEl.style.resize = "none";
+    // Fix widget height to ~3 lines so it does not expand with node size
+    node.civitai_triggers.computeSize = function(width) {
+        return [width, 56];
+    };
 
     // Track last lora_name to detect changes and reset state
     const loraWidget = node.widgets.find(w => w.name === "lora_name");
@@ -117,8 +123,9 @@ function addCivitaiWidgets(node) {
     }
 
     // Adjust node size to accommodate preview area
-    // Minimum: widgets (~30+30+70=130) + min preview (80) + margins (~40)
-    node.size[1] = Math.max(node.size[1], 300);
+    // Widget area: title(40) + 4 std widgets(30*4) + trigger(56) + spacing(20) ≈ 260
+    // Preview min height: 80. Total min: 260 + 80 + 20 = 360
+    node.size[1] = Math.max(node.size[1], 360);
 }
 
 async function doFetch(node, force = false) {
@@ -221,23 +228,21 @@ function logMessage(node, message) {
 
 function getPreviewArea(node) {
     // Calculate preview area position relative to node top-left.
-    // onDrawForeground draws in local node coordinates, so we must NOT
-    // add node.pos (the canvas is already translated to the node origin).
+    // onDrawForeground draws in local node coordinates.
     const margin = 10;
     const x = margin;
     const w = Math.max(0, node.size[0] - margin * 2);
 
-    // Ensure preview area does not overlap with widgets.
-    // Approximate widget area height: 5 widgets * ~30px + trigger textarea ~70px
-    // plus LiteGraph spacing ~= 240px. We reserve 250px for the widget area.
-    const minPreviewY = 250;
-    const maxPreviewHeight = Math.max(0, node.size[1] - minPreviewY - margin);
-
-    const minHeight = 80;
-    const preferredHeight = node.size[1] * 0.40; // 40% of node height
-    const h = Math.max(minHeight, Math.min(maxPreviewHeight, preferredHeight));
+    // Fixed height reserved for the widget area (title, inputs, widgets, outputs).
+    // This must match the actual vertical space consumed by all widgets above
+    // the preview so that resizing the node only grows the preview, not the
+    // trigger-words textarea.
+    const WIDGET_AREA_END = 260;
 
+    // Preview fills all remaining vertical space, minimum 80px.
+    const h = Math.max(80, node.size[1] - WIDGET_AREA_END - margin);
     const y = node.size[1] - h - margin;
+
     return { x, y, w, h };
 }