From 31f3e77bf6f5ab4f579fc35386eb5c3504f30c8e Mon Sep 17 00:00:00 2001
From: dborup <dborup@mbpm5.local>
Date: Fri, 17 Jul 2026 15:56:16 +0200
Subject: [PATCH] fix: show resolved scope name directly in the packets-tab
 badge label
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The transport badge previously only surfaced a known scope in the
title tooltip, requiring a hover. Now the label itself reads
"T·#region" so it's visible at a glance, matching the "T?" unknown
case which was already inline. Badge gets a max-width + ellipsis so
long region names (e.g. "#dk-trekantsomraadet") don't blow out the
Type column — full name stays in the title.
---
 public/app.js    | 14 +++++++++-----
 public/style.css |  5 +++++
 2 files changed, 14 insertions(+), 5 deletions(-)

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) —