From 97e6692ebfcfb60367846965a1c3d9b09f40c450 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Tue, 10 Nov 2026 23:02:18 -0500
Subject: [PATCH] Rack: put a patch panel's name above its ports

A long panel name (UACC-Rack-Panel-Patch-Blank-24) was drawn in the left
ear at full size and ran under the ports. It is now a small caption in
the panel's top-left corner, shortened past 48 characters with the full
name in its tooltip.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 static/rack.js   | 4 ++--
 static/style.css | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/static/rack.js b/static/rack.js
index a0d5c31..0a966a2 100644
--- a/static/rack.js
+++ b/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>`;
 }
diff --git a/static/style.css b/static/style.css
index 7507aee..2d77b6f 100644
--- a/static/style.css
+++ b/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; }
-- 
2.47.3