diff --git a/public/app.js b/public/app.js index 1d348a7b..01d989d4 100644 --- a/public/app.js +++ b/public/app.js @@ -15,11 +15,14 @@ function getPathLenOffset(routeType) { return isTransportRoute(routeType) ? 5 : /** * scopeName is optional (callers that don't pass it get the original * unscoped "T" badge). Pass a packet's scope_name to also surface the - * region-scope state: a non-empty string shows the region name in the - * tooltip, an empty string (transport-eligible but no region matched, or - * an HMAC collision made the match ambiguous) is flagged as "unknown" - * with a distinct badge style so it's visually distinguishable from a - * confidently-resolved scope. + * region-scope state directly in the badge label (not just on hover): a + * non-empty string is appended to the label as "T·#region", an empty + * string (transport-eligible but no region matched, or an HMAC collision + * made the match ambiguous) renders as "T?" with a distinct muted badge + * style so it's visually distinguishable from a resolved scope without + * relying on the tooltip or on color alone. The full name always stays + * in the title too, for the (rare) case a long region name gets + * ellipsis-truncated by the badge's CSS max-width. */ function transportBadge(rt, scopeName) { if (!isTransportRoute(rt)) return ''; @@ -29,6 +32,7 @@ function transportBadge(rt, scopeName) { if (scopeName !== undefined) { if (scopeName) { title += ' · Scope: ' + scopeName; + label = 'T·' + scopeName; } else { title += ' · Scope: unknown'; cls += ' badge-transport-unknown'; diff --git a/public/style.css b/public/style.css index 84382f9e..b46ab281 100644 --- a/public/style.css +++ b/public/style.css @@ -1424,6 +1424,11 @@ body.scroll-locked { overflow: hidden; } font-size: 9px; font-weight: 700; font-family: var(--mono); background: var(--transport-badge-bg, #f59e0b20); color: var(--transport-badge-fg, #d97706); letter-spacing: .5px; vertical-align: middle; + /* Region names can run long (e.g. "#dk-trekantsomraadet") — cap and + ellipsis instead of blowing out the Type column; full name is + always in the title attribute. */ + max-width: 90px; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; vertical-align: middle; } /* Transport-scoped but the region couldn't be resolved (no configured region matched, or an HMAC collision made the match ambiguous) —