Keep the table inside the viewport, and make the structure copyable

Printing whole SMILES pushed the table past the screen - fifty characters in a column
sharing space with six score columns. Truncating alone would have made the structure
useless, since the point of showing it is that someone can take it, so the cell now shows
a prefix with a copy button that puts the full string on the clipboard. The button stops
the click reaching the row, which would otherwise toggle the overlay underneath.

The page still scrolled sideways after that, for an unrelated reason: a grid item defaults
to min-width:auto, so the leaderboard column would not shrink below the table's min-width
and shoved the submission card off-screen.

Withheld structures get no copy button - there is nothing to copy and offering one would
imply otherwise.

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

index.html

@@ -182,6 +182,9 @@
   .legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:11px;color:var(--muted)}
   .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
   .grid{display:grid;grid-template-columns:1fr 348px;gap:20px;align-items:start;margin-top:20px}
+  /* A grid item defaults to min-width:auto, so the 1fr column refused to shrink below
+     the table's min-width and pushed the submission card off-screen. */
+  .grid > *{min-width:0}
   @media(max-width:960px){.grid{grid-template-columns:1fr}#langbar{position:static;margin-bottom:14px;width:max-content}#langnote{position:static;margin-bottom:8px}}
   .card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
         padding:18px 20px;box-shadow:var(--shadow)}
@@ -208,9 +211,15 @@
   .rk.top{color:var(--accent);font-size:15px}
   .cid{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;font-weight:600}
   .skel{color:#93a1b5;font-size:11px;font-family:ui-monospace,monospace}
-  .smi2{display:block;color:#1c2a3d;font-size:12px;font-weight:600;
-        font-family:ui-monospace,Menlo,Consolas,monospace;max-width:290px;
+  .smiwrap{display:flex;align-items:center;gap:6px;max-width:250px}
+  .smi2{color:#1c2a3d;font-size:12px;font-weight:600;
+        font-family:ui-monospace,Menlo,Consolas,monospace;
         overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .cp{flex:none;border:1px solid var(--line);background:#fff;border-radius:6px;
+      width:22px;height:22px;line-height:1;cursor:pointer;color:var(--muted);
+      font-size:11px;padding:0}
+  .cp:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
+  .cp.done{border-color:var(--accent);color:#fff;background:var(--accent)}
   .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;
@@ -429,7 +438,7 @@ const T = {
       synthesis:d=>`합성난이도 SA ${d.sa_score ?? "–"} (1 쉬움 ~ 10 어려움)`,
     },
     ov_pred:"예측치", ov_pf:"말라리아 효소", ov_hs:"사람 효소", ov_sel:"선택도",
-    private_note:"제출자가 비공개를 선택한 구조",
+    private_note:"제출자가 비공개를 선택했습니다", copy_smiles:"분자식 복사",
     private_full:"제출자가 비공개를 선택했습니다. 후보 ID와 골격 해시로만 식별됩니다.",
     reasons:{
       parse:      r=>"구조를 해석할 수 없습니다 (SMILES 또는 InChI로 제출하세요)",
@@ -523,7 +532,7 @@ const T = {
       synthesis:d=>`SA score ${d.sa_score ?? "–"} (1 easy - 10 hard)`,
     },
     ov_pred:"Predicted", ov_pf:"parasite enzyme", ov_hs:"human enzyme", ov_sel:"selectivity",
-    private_note:"structure withheld by the entrant",
+    private_note:"structure withheld by the entrant", copy_smiles:"Copy SMILES",
     private_full:"The entrant chose to keep this structure private. It is identified only by its candidate ID and skeleton hash.",
     reasons:{
       parse:      r=>"Structure could not be parsed (submit SMILES or InChI)",
@@ -687,11 +696,16 @@ function render(){
         + '</span>';
     const _m = e.is_anchor ? (e.note || d.ref) : (e.model_name || "\u2013");
     const who = `<span class="who" title="${_m}">${_m}</span>`;
-    // the structure is the name now; a withheld one shows its ends, middle blanked
-    const shown = (e.visibility === "public" && e.smiles) ? e.smiles : e.smiles_masked;
+    // the structure is the name now; a withheld one shows its ends, middle blanked.
+    // Only a published structure gets a copy button - there is nothing to copy otherwise.
+    const isPub = e.visibility === "public" && !!e.smiles;
+    const shown = isPub ? e.smiles : e.smiles_masked;
+    const clip = shown ? (shown.length > 26 ? shown.slice(0, 26) + "\u2026" : shown) : "";
     const id = e.is_anchor ? `<b>${e.candidate_id}</b>`
       : (shown
-          ? `<span class="smi2" title="${shown}">${shown}</span>`
+          ? `<span class="smiwrap"><span class="smi2" title="${shown}">${clip}</span>`
+            + (isPub ? `<button class="cp" data-smi="${e.smiles}" title="${d.copy_smiles}">\u29c9</button>` : "")
+            + `</span>`
           : `<span class="cid">${e.candidate_id}</span>`);
     const tag = e.is_anchor ? `<span class="tag a">${d.anchor}</span>`
               : (e.tier===2 ? `<span class="tag r">${d.relegated}</span>` : "");
@@ -704,6 +718,17 @@ 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);
+  });
+
   // 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];