diff --git a/frontend/src/NetworkMapUnifi.jsx b/frontend/src/NetworkMapUnifi.jsx index a4c5ba2..ccc2c73 100644 --- a/frontend/src/NetworkMapUnifi.jsx +++ b/frontend/src/NetworkMapUnifi.jsx @@ -278,6 +278,7 @@ export default function NetworkMapUnifi({ speed && (speed.tcpDownloadBps != null || speed.tcpUploadBps != null) ? formatSpeedShort(speed.tcpDownloadBps, speed.tcpUploadBps) : null; + const compactEdgeLabel = pingLabel || speedLabel || null; const edgeLabel = pingLabel && speedLabel ? `${pingLabel} • ${speedLabel}` : (pingLabel || speedLabel); return { @@ -288,6 +289,7 @@ export default function NetworkMapUnifi({ p2, pingLabel, speedLabel, + compactEdgeLabel, edgeLabel, pingStale, speedStale, @@ -552,9 +554,12 @@ export default function NetworkMapUnifi({ filter="url(#edgeGlow)" /> {(() => { - const showLabel = e.edgeLabel && (!denseMode || isFocused || e.stale); - if (!showLabel) return null; - const minDist = denseMode ? 56 : 70; + const compactOnly = denseMode && !isFocused && !e.stale; + const labelText = compactOnly + ? (e.compactEdgeLabel || e.edgeLabel) + : e.edgeLabel; + if (!labelText) return null; + const minDist = denseMode ? 52 : 70; let level = 0; let x; let y; while (level < 10) { @@ -572,9 +577,11 @@ export default function NetworkMapUnifi({ const pad = 10; const isStale = e.stale === true; const staleColor = UNIFI_WARNING; - const textWidth = e.edgeLabel.length * 6.2; + const textWidth = labelText.length * (compactOnly ? 5.9 : 6.2); const iconWidth = isStale ? 14 : 0; - const w = Math.max(LABEL_W, Math.min(textWidth + pad * 2 + iconWidth, 210)); + const minW = compactOnly ? 76 : LABEL_W; + const maxW = compactOnly ? 160 : 210; + const w = Math.max(minW, Math.min(textWidth + pad * 2 + iconWidth, maxW)); const h = LABEL_H; const textX = x - (iconWidth / 2); return ( @@ -605,10 +612,10 @@ export default function NetworkMapUnifi({ textAnchor="middle" dominantBaseline="middle" fill={isStale ? staleColor : edgeColor} - fontSize={11} + fontSize={compactOnly ? 10.2 : 11} fontWeight={600} > - {e.edgeLabel} + {labelText} );