From 0fed12a62dd113cefd7cb13bb8195afce680c0d7 Mon Sep 17 00:00:00 2001
From: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com>
Date: Tue, 16 Dec 2025 09:22:49 +0900
Subject: [PATCH] [backport core/1.35] fix: collapsed nodes getting extra
 height based on contents (#7530)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Backport of #7490 to `core/1.35`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7530-backport-core-1-35-fix-collapsed-nodes-getting-extra-height-based-on-contents-2ca6d73d3650810ebc93e4b39710d2f3)
by [Unito](https://www.unito.io)

Co-authored-by: Rizumu Ayaka <rizumu@ayaka.moe>
---
 .../vueNodes/components/LGraphNode.vue        | 29 +++++++++++-------
 .../vueNodes/components/LGraphNode.test.ts    | 30 ++++++++++++++++++-
 2 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 4f13ee2aa..804a1f654 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -297,19 +297,26 @@ const handleContextMenu = (event: MouseEvent) => {
 }
 
 onMounted(() => {
-  // Set initial DOM size from layout store, but respect intrinsic content minimum
-  if (size.value && nodeContainerRef.value) {
-    nodeContainerRef.value.style.setProperty(
-      '--node-width',
-      `${size.value.width}px`
-    )
-    nodeContainerRef.value.style.setProperty(
-      '--node-height',
-      `${size.value.height}px`
-    )
-  }
+  initSizeStyles()
 })
 
+/**
+ * Set initial DOM size from layout store, but respect intrinsic content minimum.
+ * Important: nodes can mount in a collapsed state, and the collapse watcher won't
+ * run initially. Match the collapsed runtime behavior by writing to the correct
+ * CSS variables on mount.
+ */
+function initSizeStyles() {
+  const el = nodeContainerRef.value
+  const { width, height } = size.value
+  if (!el) return
+
+  const suffix = isCollapsed.value ? '-x' : ''
+
+  el.style.setProperty(`--node-width${suffix}`, `${width}px`)
+  el.style.setProperty(`--node-height${suffix}`, `${height}px`)
+}
+
 const baseResizeHandleClasses =
   'absolute h-3 w-3 opacity-0 pointer-events-auto focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/40'
 
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.test.ts
index b8dec3201..c1ae14094 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.test.ts
@@ -60,7 +60,7 @@ vi.mock('@/composables/useErrorHandling', () => ({
 vi.mock('@/renderer/extensions/vueNodes/layout/useNodeLayout', () => ({
   useNodeLayout: () => ({
     position: { x: 100, y: 50 },
-    size: { width: 200, height: 100 },
+    size: computed(() => ({ width: 200, height: 100 })),
     zIndex: 0,
     startDrag: vi.fn(),
     handleDrag: vi.fn(),
@@ -201,4 +201,32 @@ describe('LGraphNode', () => {
 
     expect(wrapper.classes()).toContain('outline-node-stroke-executing')
   })
+
+  it('should initialize height CSS vars for collapsed nodes', () => {
+    const wrapper = mountLGraphNode({
+      nodeData: {
+        ...mockNodeData,
+        flags: { collapsed: true }
+      }
+    })
+
+    expect(wrapper.element.style.getPropertyValue('--node-height')).toBe('')
+    expect(wrapper.element.style.getPropertyValue('--node-height-x')).toBe(
+      '100px'
+    )
+  })
+
+  it('should initialize height CSS vars for expanded nodes', () => {
+    const wrapper = mountLGraphNode({
+      nodeData: {
+        ...mockNodeData,
+        flags: { collapsed: false }
+      }
+    })
+
+    expect(wrapper.element.style.getPropertyValue('--node-height')).toBe(
+      '100px'
+    )
+    expect(wrapper.element.style.getPropertyValue('--node-height-x')).toBe('')
+  })
 })