url/homelable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

prioritize service name and port, truncate path or hide when necessary

Browse Source
This commit is contained in:
findthelorax
2026-04-22 00:24:24 -04:00
committed by Remy
parent 16adff5cff
commit 1a978c5e51
1 changed files with 5 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/DetailPanel.tsx
+5 -7
View File
@@ -665,13 +665,11 @@ function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?
const portLabel = hasPort ? String(svc.port) : ''; const portLabel = hasPort ? String(svc.port) : '';
const pathLabel = svc.path?.trim() ? svc.path.trim() : ''; const pathLabel = svc.path?.trim() ? svc.path.trim() : '';
// Calculate available width for path: if name is long, path gets less or no space const maxTotalWidth = 220;
// We'll use a ref to measure the name width, but for minimal change, estimate by string length const nameCharWidth = 7.2;
const maxTotalWidth = 220; // px, total badge width minus paddings/buttons const nameWidth = Math.min(svc.service_name.length * nameCharWidth, maxTotalWidth - 60);
const nameCharWidth = 7.2; // px per char (approx for font-size 12px) const pathMaxWidth = Math.max(0, maxTotalWidth - nameWidth - 60);
const nameWidth = Math.min(svc.service_name.length * nameCharWidth, maxTotalWidth - 60); // reserve 60px for port/buttons const showPath = pathLabel && pathMaxWidth > 30;
const pathMaxWidth = Math.max(0, maxTotalWidth - nameWidth - 60); // 60px for port/buttons
const showPath = pathLabel && pathMaxWidth > 30; // hide path if not enough space
return ( return (
<div <div