From 4ee68b839ca39444a3a7c583420b4237a9eed132 Mon Sep 17 00:00:00 2001
From: findthelorax <findthelorax@gmial.com>
Date: Wed, 22 Apr 2026 00:24:24 -0400
Subject: [PATCH] prioritize service name and port, truncate path or hide when
 necessary

---
 frontend/src/components/panels/DetailPanel.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/panels/DetailPanel.tsx b/frontend/src/components/panels/DetailPanel.tsx
index 30b7742..43a2ad0 100644
--- a/frontend/src/components/panels/DetailPanel.tsx
+++ b/frontend/src/components/panels/DetailPanel.tsx
@@ -665,13 +665,11 @@ function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?
   const portLabel = hasPort ? String(svc.port) : '';
   const pathLabel = svc.path?.trim() ? svc.path.trim() : '';
 
-  // Calculate available width for path: if name is long, path gets less or no space
-  // We'll use a ref to measure the name width, but for minimal change, estimate by string length
-  const maxTotalWidth = 220; // px, total badge width minus paddings/buttons
-  const nameCharWidth = 7.2; // px per char (approx for font-size 12px)
-  const nameWidth = Math.min(svc.service_name.length * nameCharWidth, maxTotalWidth - 60); // reserve 60px for port/buttons
-  const pathMaxWidth = Math.max(0, maxTotalWidth - nameWidth - 60); // 60px for port/buttons
-  const showPath = pathLabel && pathMaxWidth > 30; // hide path if not enough space
+  const maxTotalWidth = 220;
+  const nameCharWidth = 7.2;
+  const nameWidth = Math.min(svc.service_name.length * nameCharWidth, maxTotalWidth - 60);
+  const pathMaxWidth = Math.max(0, maxTotalWidth - nameWidth - 60);
+  const showPath = pathLabel && pathMaxWidth > 30;
 
   return (
     <div