Lab: truncate long variant names in the list, keeping the hash

index.html

@@ -60,6 +60,10 @@
   .itembtn.active:hover { background: var(--accent);
                           border-color: var(--accent); }
   .itembtn.active small { color: var(--accent-soft); }
+  /* Long ids truncate in the middle: the trailing hash is what tells variants apart */
+  .itemname { display: flex; min-width: 0; white-space: nowrap; }
+  .itemname span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+  .itemname span + span { flex-shrink: 0; }
   #stage { flex: 1; position: relative; min-width: 0; }
   #stage canvas { display: block; }
   #hint { position: absolute; left: 12px; bottom: 10px; color: var(--ink-32);
@@ -607,7 +611,10 @@ fetch("classes.json")
       const btn = document.createElement("button");
       btn.className = "itembtn";
       const d = item.dims_m;
-      btn.innerHTML = `${item.id.replace(/^[a-z_]+_(?=\d)/, "#")}
+      const label = item.id.replace(/^[a-z_]+_(?=\d)/, "#");
+      const [, head, tail] = label.match(/^(.*?)(_[0-9a-f]{6})?$/);
+      btn.title = item.id;
+      btn.innerHTML = `<span class="itemname"><span>${head}</span>${tail ? `<span>${tail}</span>` : ""}</span>
         <small>${d[0].toFixed(2)}×${d[1].toFixed(2)}×${d[2].toFixed(2)} m ·
         ${item.mass_kg.toFixed(1)} kg · ${item.joints.length} j</small>`;
       btn.onclick = () => {