From 32688b8e342b67828b8c9ecb6449c01bb99c731c Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Tue, 28 Oct 2025 17:20:35 -0700
Subject: [PATCH] fix: Node Sizing that works in Firefox (#6352)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

I still love Firefox, even if it's special.

(Swap height/width and min-height min-width logic)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6352-fix-Node-Sizing-that-works-in-Firefox-29a6d73d3650816b9a2fd271445e193f)
by [Unito](https://www.unito.io)
---
 .../vueNodes/components/LGraphNode.vue        | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 72d064134..e4f02cf5f 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -9,7 +9,7 @@
     :class="
       cn(
         'bg-node-component-surface lg-node absolute',
-        'min-h-min min-w-min contain-style contain-layout',
+        'h-min w-min contain-style contain-layout min-h-(--node-height) min-w-(--node-width)',
         'rounded-2xl touch-none flex flex-col',
         'border-1 border-solid border-node-component-border',
         // hover (only when node should handle events)
@@ -270,8 +270,14 @@ 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.width = `${size.value.width}px`
-    nodeContainerRef.value.style.height = `${size.value.height}px`
+    nodeContainerRef.value.style.setProperty(
+      '--node-width',
+      `${size.value.width}px`
+    )
+    nodeContainerRef.value.style.setProperty(
+      '--node-height',
+      `${size.value.height}px`
+    )
   }
 })
 
@@ -318,8 +324,8 @@ const { startResize } = useNodeResize(
     if (isCollapsed.value) return
 
     // Apply size directly to DOM element - ResizeObserver will pick this up
-    element.style.width = `${result.size.width}px`
-    element.style.height = `${result.size.height}px`
+    element.style.setProperty('--node-width', `${result.size.width}px`)
+    element.style.setProperty('--node-height', `${result.size.height}px`)
 
     const currentPosition = position.value
     const deltaX = Math.abs(result.position.x - currentPosition.x)
@@ -345,8 +351,8 @@ const handleResizePointerDown = (direction: ResizeHandleDirection) => {
 whenever(isCollapsed, () => {
   const element = nodeContainerRef.value
   if (!element) return
-  element.style.width = ''
-  element.style.height = ''
+  element.style.setProperty('--node-width', '')
+  element.style.setProperty('--node-height', '')
 })
 
 // Check if node has custom content (like image/video outputs)