From 340bd150992c8226333e796266d0b9e743bbbbd5 Mon Sep 17 00:00:00 2001
From: findthelorax <findthelorax@gmial.com>
Date: Sun, 19 Apr 2026 21:55:47 -0400
Subject: [PATCH] fix: external link icon on the detail panel for non URL
 services

---
 .../src/components/panels/DetailPanel.tsx     | 75 ++++++++++---------
 1 file changed, 41 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/panels/DetailPanel.tsx b/frontend/src/components/panels/DetailPanel.tsx
index b53a8ad..1152112 100644
--- a/frontend/src/components/panels/DetailPanel.tsx
+++ b/frontend/src/components/panels/DetailPanel.tsx
@@ -662,38 +662,41 @@ 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) : ''
+  const portLabel = hasPort ? String(svc.port) : 'host'
   const pathLabel = svc.path?.trim() ? svc.path.trim() : ''
 
   return (
     <div
-      className="group flex items-center gap-1 border rounded-md text-xs transition-colors px-2 py-1.5 min-w-0"
+      className="group flex items-center justify-between gap-2 px-2 py-1.5 rounded-md border text-xs transition-colors min-w-0"
       style={{ background: '#21262d', borderColor: '#30363d' }}
     >
-      <span className="shrink-0 w-1.5 h-1.5 rounded-full" style={{ backgroundColor: color }} />
-      {url ? (
-        <a
-          href={url}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="font-medium truncate min-w-0 flex-1"
-          style={{ color }}
-          title={svc.service_name}
-          onClick={e => e.stopPropagation()}
-        >
-          {svc.service_name}
-        </a>
-      ) : (
-        <span
-          className="font-medium truncate min-w-0 flex-1"
-          style={{ color }}
-          title={svc.service_name}
-        >
-          {svc.service_name}
-        </span>
-      )}
-      <div className="flex items-center gap-1 shrink-0">
+      <div className="flex items-center gap-1.5 min-w-0 flex-1">
+        <span className="shrink-0 w-1.5 h-1.5 rounded-full" style={{ backgroundColor: color }} />
+
+        {url ? (
+          <a
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="font-medium truncate"
+            style={{ color }}
+            title={svc.service_name}
+            onClick={e => e.stopPropagation()}
+          >
+            {svc.service_name}
+          </a>
+        ) : (
+          <span
+            className="font-medium truncate"
+            style={{ color }}
+            title={svc.service_name}
+          >
+            {svc.service_name}
+          </span>
+        )}
+
         {pathLabel && (
           <TooltipProvider>
             <Tooltip>
@@ -710,34 +713,38 @@ function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?
             </Tooltip>
           </TooltipProvider>
         )}
-        {hasPort && (
-          <span className="font-mono text-[#8b949e] shrink-0">{portLabel}/{svc.protocol}</span>
-        )}
+      </div>
+
+      <div className="flex items-center gap-1.5 shrink-0">
+        <span className="font-mono text-[#8b949e]">
+          {portLabel}/{svc.protocol}
+        </span>
+
         {url ? (
           <a
             href={url}
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex w-2.5 h-2.5 items-center justify-center shrink-0"
-            aria-label="Open service link"
-            style={{ color: 'inherit' }}
+            className="inline-flex w-2.5 h-2.5 items-center justify-center"
             onClick={e => e.stopPropagation()}
           >
             <ExternalLink size={10} className="text-muted-foreground" />
           </a>
         ) : (
-          <span className="w-2.5 shrink-0" />
+          <span className="w-2.5" />
         )}
+
         <button
           onClick={(e) => { e.preventDefault(); e.stopPropagation(); onEdit() }}
-          className="opacity-100 transition-opacity text-[#8b949e] hover:text-[#00d4ff] ml-0.5"
+          className="opacity-0 group-hover:opacity-100 transition-opacity text-[#8b949e] hover:text-[#00d4ff] ml-0.5"
           title="Edit service"
         >
           <Pencil size={10} />
         </button>
+
         <button
           onClick={(e) => { e.preventDefault(); e.stopPropagation(); onRemove() }}
-          className="opacity-100 transition-opacity text-[#8b949e] hover:text-[#f85149] ml-0.5"
+          className="opacity-0 group-hover:opacity-100 transition-opacity text-[#8b949e] hover:text-[#f85149] ml-0.5"
           title="Remove service"
         >
           <X size={10} />