Put the 3D compare button next to each partner and pin that column

backend/space_app.py

@@ -120,11 +120,13 @@ async def frontend(path: str):
     if path and requested.is_file():
         return FileResponse(requested)
 
+    # HTML must be revalidated so a new deploy (new hashed bundle) shows on reload
+    no_cache = {"Cache-Control": "no-cache"}
     prerendered = requested / "index.html"
     if path and prerendered.is_file():
-        return FileResponse(prerendered)
+        return FileResponse(prerendered, headers=no_cache)
 
     index = FRONTEND_DIR / "index.html"
     if not index.is_file():
         raise HTTPException(status_code=503, detail="Frontend build is not available")
-    return FileResponse(index)
+    return FileResponse(index, headers=no_cache)

frontend/src/components/Transitions.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState } from 'react';
+import { Box } from 'lucide-react';
 import { ENERGY_TERMS, type EnergyTerm, type OrderChange, type Transition } from '../lib/api';
 import { FIDELITY_INFO, FIDELITY_ORDER, fidelityColor, fidelityKey } from '../lib/fidelity';
 import { chainLabel, fmtNum, fmtSigned, methodShort } from '../lib/format';
@@ -263,7 +264,7 @@ export function TransitionsTable({
         <EmptyState title="No partner observations in this view" />
       ) : (
         <div className="table-wrap">
-          <table className="table table--dense table--rows">
+          <table className="table table--dense table--rows table--sticky-first">
             <thead>
               <tr>
                 <th>Partner</th>
@@ -279,7 +280,6 @@ export function TransitionsTable({
                 {th('resolution', 'Res. Å')}
                 <th>Ligand</th>
                 {th('date', 'Released')}
-                {onView && <th>Structure</th>}
               </tr>
             </thead>
             <tbody>
@@ -295,7 +295,22 @@ export function TransitionsTable({
                     }}
                   >
                     <td>
-                      <ChainLink pdb={t.pdb_id} chain={t.auth_asym_id} strong />
+                      <span className="partner-cell">
+                        <ChainLink pdb={t.pdb_id} chain={t.auth_asym_id} strong />
+                        {onView && (
+                          <button
+                            type="button"
+                            className="btn-3d"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onView(t);
+                            }}
+                            title="View both structures superposed, coloured by per-residue deviation"
+                          >
+                            <Box aria-hidden /> 3D
+                          </button>
+                        )}
+                      </span>
                     </td>
                     <td className="num tabular">{t.state_id ?? '—'}</td>
                     <td>
@@ -322,21 +337,7 @@ export function TransitionsTable({
                       <LigandBadge status={t.binding_status} />
                     </td>
                     <td className="num tabular">{t.release_date ?? '—'}</td>
-                    {onView && (
-                      <td>
-                        <button
-                          type="button"
-                          className="btn btn--ghost btn--sm"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            onView(t);
-                          }}
-                          title="Superpose with this chain, coloured by per-residue deviation"
-                        >
-                          View
-                        </button>
-                      </td>
-                    )}
+
                   </tr>
                 );
               })}

frontend/src/styles/ui.css

@@ -1369,3 +1369,52 @@ main {
 .state__retry {
   margin-top: 10px;
 }
+
+/* first column stays in view while a wide table scrolls sideways */
+.table--sticky-first th:first-child,
+.table--sticky-first td:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  box-shadow: 1px 0 0 var(--line);
+}
+
+.table--sticky-first td:first-child {
+  background: var(--surface);
+}
+
+.table--sticky-first th:first-child {
+  z-index: 2;
+}
+
+.partner-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-3d {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  height: 22px;
+  padding: 0 7px;
+  border-radius: 6px;
+  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  font-size: 11.5px;
+  font-weight: 650;
+  white-space: nowrap;
+}
+
+.btn-3d svg {
+  width: 12px;
+  height: 12px;
+}
+
+.btn-3d:hover {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}