Keep the detail overlay off the copy button

The overlay opened aligned to the row's left edge - exactly where the structure and its
copy button sit - so hovering a row buried the control the reader was reaching for. It now
anchors to the right of the row, leaving the structure column clear, and carries its own
copy button so the full string is available from the panel that is already open.

The panel accepts clicks now rather than being click-through, which it has to be to hold a
button, and a short grace period on leaving a row means moving the pointer into the panel
does not dismiss it first.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

index.html

@@ -75,7 +75,7 @@
 
   #ov{position:fixed;z-index:50;display:none;width:340px;background:#fff;
       border:1px solid var(--line);border-radius:14px;padding:15px 16px;
-      box-shadow:0 12px 40px rgba(19,26,38,.18);pointer-events:none}
+      box-shadow:0 12px 40px rgba(19,26,38,.18)}
   #ov h4{margin:0 0 2px;font-size:14px;font-weight:800;letter-spacing:-.2px}
   #ov .oid{font-size:11px;color:var(--muted);font-family:ui-monospace,monospace;margin-bottom:10px}
   #ov .orow{display:grid;grid-template-columns:60px 1fr 42px;gap:8px;align-items:center;
@@ -223,7 +223,8 @@
   .lock{color:#93a1b5;font-size:10.5px;margin-top:1px;display:block}
   #ov .osmi{margin-top:10px;padding:9px 10px;background:#f6f8fc;border:1px solid var(--line);
             border-radius:8px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;
-            color:#31465e;line-height:1.5;word-break:break-all}
+            color:#31465e;line-height:1.5;word-break:break-all;position:relative}
+  #ov .osmi .cp{position:absolute;top:6px;right:6px}
   .who{color:var(--muted);font-size:12.5px}
   /* Long model identifiers wrapped onto four lines and made every row three times
      taller than it needed to be. Truncate; the full value is on the tooltip. */
@@ -718,23 +719,15 @@ function render(){
         <span class="tot">${f1(e.total)}</span></div></td></tr>`;
   }).join("") : `<tr><td colspan="11" class="who">${d.empty}</td></tr>`;
 
-  $("#rows").querySelectorAll(".cp").forEach(b => b.onclick = async (ev) => {
-    // without this the click also reaches the row and toggles the overlay
-    ev.stopPropagation();
-    const v = b.dataset.smi;
-    try{ await navigator.clipboard.writeText(v); }
-    catch(_){ const ta=document.createElement("textarea"); ta.value=v;
-      document.body.appendChild(ta); ta.select(); document.execCommand("copy"); ta.remove(); }
-    b.classList.add("done"); b.textContent = "\u2713";
-    setTimeout(()=>{ b.classList.remove("done"); b.textContent = "\u29c9"; }, 1200);
-  });
+  wireCopy($("#rows"));
 
   // rows carry their entry so the overlay never has to look anything up again
   [...document.querySelectorAll("#rows tr")].forEach((tr, i) => {
     const e = rows[i];
     if(!e) return;
-    tr.onmouseenter = () => showOverlay(e, tr.getBoundingClientRect());
-    tr.onmouseleave = hideOverlay;
+    tr.onmouseenter = () => { clearTimeout(OV._t); showOverlay(e, tr.getBoundingClientRect()); };
+    // a short grace period, so moving the pointer into the panel does not dismiss it
+    tr.onmouseleave = () => { OV._t = setTimeout(hideOverlay, 220); };
     // touch has no hover, so a tap toggles it
     tr.onclick = () => (OV.style.display === "block" && OV.dataset.id === e.candidate_id)
       ? hideOverlay()
@@ -935,13 +928,28 @@ function overlayHTML(e){
       ? `<div class="oflag">${e.relegate_reason.map(reasonText).join(" / ")}</div>` : "";
   const who = e.is_anchor ? (e.note||"") : [e.hf_user, e.model_name].filter(Boolean).join(" · ");
   const full = (e.visibility === "public" && e.smiles) ? e.smiles : e.smiles_masked;
+  const canCopy = e.visibility === "public" && e.smiles;
   const smi = e.is_anchor ? ""
       : `<div class="osmi">${full || ""}`
+        + (canCopy ? `<button class="cp" data-smi="${e.smiles}" title="${d.copy_smiles}">\u29c9</button>` : "")
         + (e.visibility === "public" ? "" : `<br>🔒 ${d.private_full}`) + `</div>`;
   return `<h4>${e.candidate_id}</h4><div class="oid">${who}${e.skeleton?" · "+e.skeleton:""}</div>`
        + rows + pred + smi + flag + `<div class="ofoot">${d.ov_foot}</div>`;
 }
 
+function wireCopy(root){
+  root.querySelectorAll(".cp").forEach(b => b.onclick = async (ev) => {
+    // without this the click also reaches the row and toggles the overlay
+    ev.stopPropagation();
+    const v = b.dataset.smi;
+    try{ await navigator.clipboard.writeText(v); }
+    catch(_){ const ta=document.createElement("textarea"); ta.value=v;
+      document.body.appendChild(ta); ta.select(); document.execCommand("copy"); ta.remove(); }
+    b.classList.add("done"); b.textContent = "\u2713";
+    setTimeout(()=>{ b.classList.remove("done"); b.textContent = "\u29c9"; }, 1200);
+  });
+}
+
 function showOverlay(e, rect){
   OV.innerHTML = overlayHTML(e);
   OV.style.display = "block";
@@ -949,11 +957,16 @@ function showOverlay(e, rect){
   // flip above the row rather than open past the bottom of the window
   let top = rect.bottom + 8;
   if(top + h > window.innerHeight - 8) top = Math.max(8, rect.top - h - 8);
-  let left = Math.min(rect.left, window.innerWidth - w - 12);
+  // anchor to the right of the row: the structure and its copy button live on the left,
+  // and opening over them buries the control the reader was reaching for
+  let left = Math.max(8, Math.min(rect.right - w, window.innerWidth - w - 12));
   OV.style.top = top + "px";
-  OV.style.left = Math.max(8, left) + "px";
+  OV.style.left = left + "px";
+  wireCopy(OV);
 }
 function hideOverlay(){ OV.style.display = "none"; }
+OV.onmouseenter = () => clearTimeout(OV._t);
+OV.onmouseleave = hideOverlay;
 
 async function load(){
   try{