fix: persist manual node sizes and add width/height inputs

Nested vm/lxc/docker leaf nodes lost their size on reload: the
deserialize restore branch excluded those types entirely, so a
resized child snapped back to content-fit. Gate the restore on
container_mode instead of node type.

Also prefer explicit width/height over the DOM-measured value when
serializing, so a manual resize persists its exact target rather than
drifting to the fractional content-fit size.

Add a Size section to the detail panel with W/H number inputs
(setNodeSize store action, clamped to the resizer minimums). Inputs
resync live when the node is resized by corner drag, without
clobbering active keystrokes.

ha-relevant: yes

frontend/src/utils/__tests__/canvasSerializer.test.ts

@@ -102,6 +102,20 @@ describe('serializeNode — regular node', () => {
     expect(result.height).toBeNull()
   })
 
+  it('prefers explicit width/height over the measured (content-fit) value', () => {
+    const node: Node<NodeData> = { ...makeRfNode({ width: 200, height: 100 }), measured: { width: 187, height: 73 } }
+    const result = serializeNode(node)
+    expect(result.width).toBe(200)
+    expect(result.height).toBe(100)
+  })
+
+  it('falls back to measured when no explicit dimension is set', () => {
+    const node: Node<NodeData> = { ...makeRfNode(), measured: { width: 187, height: 73 } }
+    const result = serializeNode(node)
+    expect(result.width).toBe(187)
+    expect(result.height).toBe(73)
+  })
+
   it('serializes hardware fields', () => {
     const node = makeRfNode({
       data: {
@@ -162,13 +176,14 @@ describe('serializeNode — groupRect', () => {
     expect((result.custom_colors as Record<string, unknown>).height).toBe(250)
   })
 
-  it('falls back to measured dimensions over explicit width/height', () => {
+  it('prefers explicit width/height over measured, falling back to measured per-axis', () => {
     const node: Node<NodeData> = {
       ...makeRfNode({ type: 'groupRect', data: { label: 'Z', type: 'groupRect', status: 'unknown', services: [] }, width: 400 }),
       measured: { width: 420, height: 260 },
     }
     const result = serializeNode(node)
-    expect((result.custom_colors as Record<string, unknown>).width).toBe(420)
+    // Explicit width wins; height has no explicit value so it uses measured.
+    expect((result.custom_colors as Record<string, unknown>).width).toBe(400)
     expect((result.custom_colors as Record<string, unknown>).height).toBe(260)
   })
 
@@ -323,6 +338,21 @@ describe('deserializeApiNode — regular node', () => {
     expect(result.width).toBeUndefined()
     expect(result.height).toBeUndefined()
   })
+
+  // Regression: issue #205 — a leaf vm/lxc nested in a container would lose its
+  // saved size on reload because the restore branch excluded those types.
+  it.each(['vm', 'lxc', 'docker_host'] as const)(
+    'restores saved width/height for a leaf %s node (container_mode false)',
+    (type) => {
+      const map = new Map([['px1', true]])
+      const result = deserializeApiNode(
+        makeApiNode({ type, container_mode: false, parent_id: 'px1', width: 240, height: 90 }),
+        map,
+      )
+      expect(result.width).toBe(240)
+      expect(result.height).toBe(90)
+    },
+  )
 })
 
 // ── deserializeApiNode — groupRect ────────────────────────────────────────────

frontend/src/utils/canvasSerializer.ts

@@ -75,8 +75,8 @@ export function serializeNode(n: Node<NodeData>): Record<string, unknown> {
       pos_y: n.position.y,
       custom_colors: {
         ...n.data.custom_colors,
-        width: n.measured?.width ?? n.width ?? 360,
-        height: n.measured?.height ?? n.height ?? 240,
+        width: n.width ?? n.measured?.width ?? 360,
+        height: n.height ?? n.measured?.height ?? 240,
         // Stash collapse state inside custom_colors so the API/YAML blob does
         // not need a new column. Hoisted back to `data.collapsed` on load.
         collapsed: n.data.collapsed ?? false,
@@ -112,8 +112,11 @@ 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.measured?.width ?? n.width ?? null,
-    height: n.measured?.height ?? n.height ?? null,
+    // Prefer the explicit (resized) dimension over the DOM-measured one so a
+    // manual resize persists its exact target instead of drifting to the
+    // fractional content-fit value.
+    width: n.width ?? n.measured?.width ?? null,
+    height: n.height ?? n.measured?.height ?? null,
     bottom_handles: clampBottomHandles(n.data.bottom_handles ?? 1),
     show_port_numbers: n.data.show_port_numbers ?? false,
     pos_x: n.position.x,
@@ -179,11 +182,17 @@ export function deserializeApiNode(
       collapsed: Boolean(n.custom_colors?.collapsed),
     } as unknown as NodeData,
     ...(n.parent_id && parentIsContainer ? { parentId: n.parent_id, extent: 'parent' as const } : {}),
+    // Container hosts (Proxmox/VM/LXC/docker in container_mode) get a default
+    // box if none was saved. Every other node — including LEAF vm/lxc/docker
+    // nodes nested inside a container — restores its own saved width/height.
+    // Gating on container_mode (not type) is what keeps a resized nested node
+    // from snapping back to content-fit on reload.
     ...(['proxmox', 'vm', 'lxc', 'docker_host'].includes(normalizedType) && n.container_mode !== false
       ? { width: n.width ?? 300, height: n.height ?? 200 }
-      : {}),
-    ...(n.width && !['proxmox', 'vm', 'lxc', 'docker_host'].includes(normalizedType) ? { width: n.width } : {}),
-    ...(n.height && !['proxmox', 'vm', 'lxc', 'docker_host'].includes(normalizedType) ? { height: n.height } : {}),
+      : {
+          ...(n.width ? { width: n.width } : {}),
+          ...(n.height ? { height: n.height } : {}),
+        }),
   }
 }