services styling in node and detail panel

frontend/src/components/canvas/nodes/BaseNode.tsx

@@ -156,11 +156,37 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
                     color: theme.colors.nodeSubtextColor,
                   }}
                 >
-                  <span className="font-medium truncate min-w-0" title={svc.service_name}>{svc.service_name}</span>
+                  
-                  <span className="font-mono shrink-0 opacity-80 flex items-center gap-1">
+                  <div className="flex items-center justify-between gap-2 w-full min-w-0">
-                    <span>{svc.port}</span>
+                    {/* LEFT: service name */}
-                    <ExternalLink size={9} className={`shrink-0 ${url ? '' : 'opacity-0'}`} />
+                    <span
-                  </span>
+                      className="font-medium truncate"
+                      style={{ minWidth: 0 }}
+                      title={svc.service_name}
+                    >
+                      {svc.service_name}
+                    </span>
+
+                    {/* RIGHT: path + port */}
+                    <div className="flex items-center gap-2 shrink-0 min-w-0">
+                      {svc.path && (
+                        <span
+                          className="truncate text-[#8b949e] text-right max-w-[80px]"
+                          title={svc.path}
+                        >
+                          {svc.path}
+                        </span>
+                      )}
+
+                      <span className="font-mono opacity-80 flex items-center gap-1">
+                        <span>{svc.port}</span>
+                        <ExternalLink
+                          size={9}
+                          className={`shrink-0 ${url ? '' : 'opacity-0'}`}
+                        />
+                      </span>
+                    </div>
+                  </div>
                 </div>
               )
 

frontend/src/components/panels/DetailPanel.tsx

@@ -2,7 +2,7 @@ import { createElement, useState } from 'react'
 import { X, Edit, Trash2, ExternalLink, Plus, Pencil, Layers, Ungroup, Eye, EyeOff } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip'
+
 import { useCanvasStore } from '@/stores/canvasStore'
 import { NODE_TYPE_LABELS, STATUS_COLORS, type ServiceInfo, type NodeData, type NodeProperty } from '@/types'
 import { getServiceUrl } from '@/utils/serviceUrl'
@@ -662,9 +662,6 @@ const CATEGORY_COLORS: Record<string, string> = {
 function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?: string; onEdit: () => void; onRemove: () => void }) {
   const url = getServiceUrl(svc, host)
   const color = CATEGORY_COLORS[svc.category ?? ''] ?? '#8b949e'
-
-  const hasPort = svc.port != null
-  const portLabel = hasPort ? String(svc.port) : 'host'
   const pathLabel = svc.path?.trim() ? svc.path.trim() : ''
 
   return (
@@ -680,7 +677,7 @@ function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?
             href={url}
             target="_blank"
             rel="noopener noreferrer"
-            className="font-medium truncate"
+            className="font-medium truncate min-w-0 flex-1"
             style={{ color }}
             title={svc.service_name}
             onClick={e => e.stopPropagation()}
@@ -689,7 +686,7 @@ function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?
           </a>
         ) : (
           <span
-            className="font-medium truncate"
+            className="font-medium truncate min-w-0 flex-1"
             style={{ color }}
             title={svc.service_name}
           >
@@ -698,27 +695,21 @@ function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?
         )}
 
         {pathLabel && (
-          <TooltipProvider>
+          <span
-            <Tooltip>
+            className="shrink-0 text-[#8b949e] text-right w-16 truncate"
-              <TooltipTrigger asChild>
+            title={pathLabel}
-                <span
+          >
-                  className="truncate text-[#8b949e] max-w-[80px]"
+            {pathLabel}
-                  tabIndex={0}
+          </span>
-                  aria-label={pathLabel}
-                >
-                  {pathLabel}
-                </span>
-              </TooltipTrigger>
-              <TooltipContent side="top">{pathLabel}</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
         )}
       </div>
 
       <div className="flex items-center gap-1.5 shrink-0">
-        <span className="font-mono text-[#8b949e]">
+        {svc.port != null && (
-          {portLabel}/{svc.protocol}
+          <span className="font-mono text-[#8b949e]">
-        </span>
+            {svc.port}/{svc.protocol}
+          </span>
+        )}
 
         {url ? (
           <a