static/rack.js

@@ -61,7 +61,7 @@ function panelSvg(item) {
   const rowH = (H - 20) / rows;
   // Label characters that fit under one port at the label's font size (9px, ~5.6px a character)
   const fit = Math.max(3, Math.floor((pitch - 2) / 5.6));
-  const short = t => (t.length > fit ? `${t.slice(0, fit - 1)}…` : t);
+  const short = (t, max = fit) => (t.length > max ? `${t.slice(0, max - 1)}…` : t);
   const ports = [];
   for (let n = 1; n <= count; n++) {
     const r = Math.floor((n - 1) / perRow), c = (n - 1) % perRow;
@@ -81,7 +81,7 @@ function panelSvg(item) {
   return `<svg class="rack-svg" viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" role="group"
       aria-label="${esc(item.name)} patch panel">
     <rect class="rack-pp-body" width="${W}" height="${H}" rx="3"/>
-    <text class="rack-pp-name" x="${ear - 50}" y="${H / 2 + 5}">${esc(item.name)}</text>
+    <text class="rack-pp-name" x="14" y="17"><title>${esc(item.name)}</title>${esc(short(item.name, 48))}</text>
     ${ports.join('')}
   </svg>`;
 }

static/style.css

@@ -1464,7 +1464,8 @@ body.fp-marks-off .fp-svg .fp-mark { display: none; }
 .rack-kind-shelf .rack-plate { background: repeating-linear-gradient(90deg, var(--rk-plate-b) 0 10px, var(--rk-frame) 10px 20px); }
 
 .rack-pp-body { fill: #1d2229; stroke: #39424e; }
-.rack-pp-name { fill: #9aa7b4; font-size: 15px; font-family: var(--font-mono, monospace); }
+/* The panel's name sits in its top-left corner, above the port numbers, so a long name can't run under the ports */
+.rack-pp-name { fill: #9aa7b4; font-size: 12px; font-family: var(--font-mono, monospace); }
 .rack-pp-num { fill: #7d8a97; font-size: 10px; }
 .rack-pp-label { fill: #c9d3dc; font-size: 9px; }
 .rack-pp-jack { fill: #0c0f13; stroke: #4a5560; stroke-width: 1.5; }