From a816faa0b9bae822668608671b5089d602254191 Mon Sep 17 00:00:00 2001
From: Pouzor <remy.jardinet@gmail.com>
Date: Sun, 19 Apr 2026 23:43:15 +0200
Subject: [PATCH] fix: prevent node width expansion when content overflows
 after resize
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Proxmox nodes with container_mode=false fell through both width conditions
in deserializeApiNode and got no explicit width on reload, causing RF to
auto-size to content width and ignoring the user's manual resize.

- canvasSerializer: unified width restore logic — saved width applies to all
  node types; proxmox container_mode defaults (300x200) only kick in when
  no saved width exists
- BaseNode: add overflow-hidden + min-w-0 to properties row so truncate
  actually clips long values instead of expanding the node
---
 frontend/src/components/canvas/nodes/BaseNode.tsx |  8 ++++----
 frontend/src/utils/canvasSerializer.ts            | 11 ++++-------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/canvas/nodes/BaseNode.tsx b/frontend/src/components/canvas/nodes/BaseNode.tsx
index 3c0f22c..b114055 100644
--- a/frontend/src/components/canvas/nodes/BaseNode.tsx
+++ b/frontend/src/components/canvas/nodes/BaseNode.tsx
@@ -77,7 +77,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
       <Handle type="target" position={Position.Top} id="top-t" style={{ opacity: 0, width: 12, height: 12 }} />
 
       {/* Main row */}
-      <div className="flex flex-row items-center gap-2.5 px-2.5 py-2">
+      <div className="flex flex-row items-center gap-2.5 px-2.5 py-2 min-w-0 overflow-hidden">
         {/* Icon */}
         <div
           className="flex items-center justify-center w-7 h-7 rounded-md shrink-0"
@@ -115,14 +115,14 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
       {visibleProperties && visibleProperties.length > 0 && (
         <>
           <div style={{ height: 1, background: `${colors.border}44`, margin: '0 8px' }} />
-          <div className="flex flex-col gap-1 px-2.5 py-1.5">
+          <div className="flex flex-col gap-1 px-2.5 py-1.5 overflow-hidden">
             {visibleProperties.map((prop) => {
               const Icon = resolvePropertyIcon(prop.icon)
               return (
-                <div key={prop.key} className="flex items-center gap-1 font-mono text-[10px]" style={{ color: theme.colors.nodeSubtextColor }}>
+                <div key={prop.key} className="flex items-center gap-1 font-mono text-[10px] min-w-0 overflow-hidden" style={{ color: theme.colors.nodeSubtextColor }}>
                   {Icon && <Icon size={9} className="shrink-0" />}
                   <span className="truncate max-w-[60px] shrink-0" title={prop.key}>{prop.key}</span>
-                  <span className="truncate" title={prop.value}>· {prop.value}</span>
+                  <span className="truncate min-w-0" title={prop.value}>· {prop.value}</span>
                 </div>
               )
             })}
diff --git a/frontend/src/utils/canvasSerializer.ts b/frontend/src/utils/canvasSerializer.ts
index 68b20d7..a0b0a43 100644
--- a/frontend/src/utils/canvasSerializer.ts
+++ b/frontend/src/utils/canvasSerializer.ts
@@ -102,8 +102,8 @@ export function serializeNode(n: Node<NodeData>): Record<string, unknown> {
     disk_gb: n.data.disk_gb ?? null,
     show_hardware: n.data.show_hardware ?? false,
     properties: n.data.properties ?? [],
-    width: n.width ?? null,
-    height: n.height ?? null,
+    width: n.measured?.width ?? n.width ?? null,
+    height: n.measured?.height ?? n.height ?? null,
     bottom_handles: n.data.bottom_handles ?? 1,
     pos_x: n.position.x,
     pos_y: n.position.y,
@@ -156,11 +156,8 @@ export function deserializeApiNode(
     position: { x: n.pos_x, y: n.pos_y },
     data: n as unknown as NodeData,
     ...(n.parent_id && parentIsContainer ? { parentId: n.parent_id, extent: 'parent' as const } : {}),
-    ...(n.type === 'proxmox' && n.container_mode !== false
-      ? { width: n.width ?? 300, height: n.height ?? 200 }
-      : {}),
-    ...(n.width && n.type !== 'proxmox' ? { width: n.width } : {}),
-    ...(n.height && n.type !== 'proxmox' ? { height: n.height } : {}),
+    ...(n.width ? { width: n.width } : n.type === 'proxmox' && n.container_mode !== false ? { width: 300 } : {}),
+    ...(n.height ? { height: n.height } : n.type === 'proxmox' && n.container_mode !== false ? { height: 200 } : {}),
   }
 }