fix: Node Sizing that works in Firefox (#6352)

## 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)
This commit is contained in:
Alexander Brown
2025-10-28 17:20:35 -07:00
committed by GitHub
parent 4ad7531269
commit 32688b8e34

View File

@@ -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)