From 29c97ae501d35c55964512d81f78ef515252ef9f Mon Sep 17 00:00:00 2001
From: Pouzor <remy.jardinet@gmail.com>
Date: Thu, 23 Apr 2026 01:34:44 +0200
Subject: [PATCH] fix: align status dot to top and restore gap in
 ProxmoxGroupNode header

---
 frontend/src/components/canvas/nodes/BaseNode.tsx    |  4 ++--
 .../src/components/canvas/nodes/ProxmoxGroupNode.tsx | 12 ++++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/canvas/nodes/BaseNode.tsx b/frontend/src/components/canvas/nodes/BaseNode.tsx
index cdfd59b..1414e68 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 min-w-0 overflow-hidden">
+      <div className="flex flex-row items-start 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"
@@ -110,7 +110,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
           ))}
         </div>
         <div
-          className="ml-auto w-1.5 h-1.5 rounded-full shrink-0 -translate-y-1.5"
+          className="ml-auto w-1.5 h-1.5 rounded-full shrink-0 mt-1"
           style={{ backgroundColor: statusColor }}
           title={data.status}
         />
diff --git a/frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx b/frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx
index 8cd4dc5..8f4cc72 100644
--- a/frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx
+++ b/frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx
@@ -5,6 +5,8 @@ import type { NodeData } from '@/types'
 import { resolveNodeColors } from '@/utils/nodeColors'
 import { resolveNodeIcon } from '@/utils/nodeIcons'
 import { resolvePropertyIcon } from '@/utils/propertyIcons'
+import { useCanvasStore } from '@/stores/canvasStore'
+import { maskIp, splitIps } from '@/utils/maskIp'
 import { useThemeStore } from '@/stores/themeStore'
 import { THEMES } from '@/utils/themes'
 import { BaseNode } from './BaseNode'
@@ -13,6 +15,7 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
   const { data, selected } = props
 
   const activeTheme = useThemeStore((s) => s.activeTheme)
+  const hideIp = useCanvasStore((s) => s.hideIp)
   const theme = THEMES[activeTheme]
   const colors = resolveNodeColors(data, activeTheme)
 
@@ -71,7 +74,7 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
       >
         {/* Header bar */}
         <div
-          className="flex flex-row items-center px-2.5 py-1.5 shrink-0"
+          className="flex flex-row items-start gap-2 px-2.5 py-1.5 shrink-0"
           style={{
             background: isOnline ? `${glow}18` : `${theme.colors.nodeIconBackground}88`,
             borderBottom: `1px solid ${isOnline ? `${glow}33` : theme.colors.handleBackground}`,
@@ -93,14 +96,15 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
             >
               {data.label}
             </span>
-            {data.ip && (
+            {data.ip && splitIps(data.ip).map((ip) => (
               <span
+                key={ip}
                 className="font-mono text-[9px] truncate"
                 style={{ color: theme.colors.nodeSubtextColor }}
               >
-                {data.ip}
+                {hideIp ? maskIp(ip) : ip}
               </span>
-            )}
+            ))}
           </div>
           {/* Status dot */}
           <div