Move record details into click modal

app.py

@@ -376,6 +376,19 @@ gradio-app,
   color: var(--ink);
 }
 
+.record-card:hover,
+.record-card:focus-within {
+  background: #fffaf0;
+  outline: 2px solid var(--line);
+  outline-offset: 2px;
+}
+
+.record-open {
+  display: block;
+  color: inherit !important;
+  text-decoration: none !important;
+}
+
 .record-card.needs-recovery {
   background: var(--orange-soft);
   border-color: #a65b0b;
@@ -515,43 +528,159 @@ gradio-app,
   color: var(--ink);
 }
 
-.record-details {
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px solid var(--line-soft);
-  color: var(--muted);
+.page-card {
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 16px;
+}
+
+.record-modal {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.record-modal:target {
+  display: flex;
+}
+
+.modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(21, 21, 21, 0.42);
+}
+
+.modal-panel {
+  position: relative;
+  z-index: 1;
+  width: min(920px, calc(100vw - 32px));
+  max-height: calc(100vh - 32px);
+  overflow: auto;
+  background: var(--paper);
+  border: 2px solid var(--line);
+  border-radius: var(--radius);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
+}
+
+.modal-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  background: var(--paper);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  color: var(--ink) !important;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1;
+  text-decoration: none !important;
+}
+
+.modal-close:hover,
+.modal-close:focus-visible {
+  background: #fffaf0;
+  outline: 2px solid var(--line);
+  outline-offset: 2px;
+}
+
+.modal-head {
+  padding: 18px 58px 12px 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.modal-case {
+  margin: 0 0 4px;
+  color: var(--quiet);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
   font-size: 12px;
-  line-height: 1.4;
+  font-weight: 700;
+  text-transform: uppercase;
 }
 
-.record-details summary {
-  cursor: pointer;
+.modal-head h3 {
+  margin: 0;
   color: var(--ink);
-  font-weight: 700;
-  list-style-position: outside;
+  font-size: 22px;
+  line-height: 1.2;
+}
+
+.modal-subtitle {
+  margin-top: 7px;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.45;
 }
 
-.record-details dl {
-  margin: 7px 0 0;
+.modal-layout {
+  display: grid;
+  grid-template-columns: minmax(240px, 340px) 1fr;
+  gap: 18px;
+  padding: 18px;
+}
+
+.modal-visual .render-stage {
+  height: 320px;
+  margin: 0;
 }
 
-.record-details dt {
-  margin-top: 6px;
+.modal-visual .packing-svg {
+  max-width: 300px;
+  max-height: 300px;
+}
+
+.modal-metric {
+  margin-bottom: 14px;
+  padding: 10px 12px;
+  background: var(--paper-soft);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius);
+}
+
+.modal-metric strong {
+  display: block;
   color: var(--ink);
-  font-weight: 700;
+  font-size: 20px;
+  line-height: 1.2;
 }
 
-.record-details dd {
-  margin: 1px 0 0;
+.modal-metric span {
+  display: block;
+  margin-top: 3px;
   color: var(--muted);
+  font-size: 13px;
+}
+
+.modal-details {
+  margin: 0;
+  display: grid;
+  grid-template-columns: 142px minmax(0, 1fr);
+  gap: 8px 14px;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.42;
+}
+
+.modal-details dt {
+  color: var(--ink);
+  font-weight: 700;
+}
+
+.modal-details dd {
+  margin: 0;
   overflow-wrap: anywhere;
 }
 
-.page-card {
-  background: var(--paper);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 16px;
+.modal-details a {
+  color: var(--link) !important;
 }
 
 .leaderboard-table {
@@ -723,6 +852,41 @@ gradio-app,
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   }
 
+  .record-modal {
+    padding: 12px;
+  }
+
+  .modal-head {
+    padding: 16px 54px 12px 14px;
+  }
+
+  .modal-layout {
+    display: block;
+    padding: 14px;
+  }
+
+  .modal-visual {
+    margin-bottom: 14px;
+  }
+
+  .modal-visual .render-stage {
+    height: 240px;
+  }
+
+  .modal-visual .packing-svg {
+    max-width: 220px;
+    max-height: 220px;
+  }
+
+  .modal-details {
+    grid-template-columns: 1fr;
+    gap: 3px;
+  }
+
+  .modal-details dd {
+    margin-bottom: 8px;
+  }
+
   .render-stage {
     height: 154px;
   }
@@ -1091,7 +1255,7 @@ def needs_recovery(record: dict[str, Any], visual_record: dict[str, Any]) -> boo
     return visual > reference + RECOVERY_TOLERANCE_ABS
 
 
-def record_details(record: dict[str, Any], visual_record: dict[str, Any], source: str, image_name: str, expression: str, analytical: Any) -> str:
+def record_detail_rows(record: dict[str, Any], visual_record: dict[str, Any], source: str, image_name: str, expression: str, analytical: Any) -> list[str]:
     rows: list[str] = []
     rows.append(detail_row("Rendering", esc(visual_provenance(record, visual_record))))
     if record.get("record_type") == "reference" and visual_record.get("verified"):
@@ -1125,11 +1289,45 @@ def record_details(record: dict[str, Any], visual_record: dict[str, Any], source
         rows.append(detail_row("Status", "analytical/proved"))
     reference_text = str(friedman_reference(record).get("reference_text") or "").strip()
     rows.append(detail_row("Reference text", esc(reference_text)))
+    return rows
+
+
+def record_modal(
+    record: dict[str, Any],
+    visual_record: dict[str, Any],
+    display_record: dict[str, Any],
+    coordinates: dict[str, dict[str, Any]],
+    source: str,
+    image_name: str,
+    expression: str,
+    analytical: Any,
+    anchor: str,
+    modal_id: str,
+    visible_author: str,
+) -> str:
+    rows = record_detail_rows(record, visual_record, source, image_name, expression, analytical)
     return f"""
-        <details class="record-details">
-          <summary>Details</summary>
-          <dl>{''.join(rows)}</dl>
-        </details>
+    <section class="record-modal" id="{esc(modal_id)}" aria-label="{esc(record.get("case"))} record information">
+      <a class="modal-backdrop" href="#{esc(anchor)}" aria-label="Close record information"></a>
+      <div class="modal-panel" role="dialog" aria-modal="true" aria-labelledby="{esc(modal_id)}-title">
+        <a class="modal-close" href="#{esc(anchor)}" aria-label="Close record information">x</a>
+        <div class="modal-head">
+          <div class="modal-case">{esc(record.get("case"))}</div>
+          <h3 id="{esc(modal_id)}-title">{esc(setup_title(str(record.get("setup") or "")))}</h3>
+          <div class="modal-subtitle">n={esc(record.get("n"))} by <strong>{esc(visible_author)}</strong></div>
+        </div>
+        <div class="modal-layout">
+          <div class="modal-visual">{record_visual(record, coordinates)}</div>
+          <div>
+            <div class="modal-metric">
+              <strong>{esc(metric_symbol(display_record))} = {esc(metric_value(display_record))}</strong>
+              <span>{esc(expression)}</span>
+            </div>
+            <dl class="modal-details">{''.join(rows)}</dl>
+          </div>
+        </div>
+      </div>
+    </section>
     """
 
 
@@ -1146,19 +1344,22 @@ def record_card(record: dict[str, Any], coordinates: dict[str, dict[str, Any]])
     if needs_recovery(record, visual_record):
         card_class += " needs-recovery"
     anchor = f"{record.get('setup')}-{record.get('n')}"
+    modal_id = f"modal-{anchor}"
     return f"""
     <article class="record-card {card_class}" id="{esc(anchor)}">
-      <div class="record-top">
-        <div class="record-case">{esc(record.get("case"))}</div>
-      </div>
-      {record_visual(record, coordinates)}
-      <div class="record-body">
-        <div class="metric"><strong>{esc(metric_symbol(display_record))} = {esc(metric_value(display_record))}</strong><span>n={esc(record.get("n"))}</span></div>
-        <div class="expression">{esc(expression)}</div>
-        <div class="record-author">by <strong>{esc(visible_author)}</strong></div>
-        {record_details(record, visual_record, source, image_name, expression, analytical)}
-      </div>
+      <a class="record-open" href="#{esc(modal_id)}" aria-label="Open {esc(record.get("case"))} record information">
+        <div class="record-top">
+          <div class="record-case">{esc(record.get("case"))}</div>
+        </div>
+        {record_visual(record, coordinates)}
+        <div class="record-body">
+          <div class="metric"><strong>{esc(metric_symbol(display_record))} = {esc(metric_value(display_record))}</strong><span>n={esc(record.get("n"))}</span></div>
+          <div class="expression">{esc(expression)}</div>
+          <div class="record-author">by <strong>{esc(visible_author)}</strong></div>
+        </div>
+      </a>
     </article>
+    {record_modal(record, visual_record, display_record, coordinates, source, image_name, expression, analytical, anchor, modal_id, visible_author)}
     """
 
 
@@ -1232,7 +1433,7 @@ def family_description(summary: dict[str, Any]) -> str:
     return (
         f"This page tracks the smallest known container metric for packing n equal {esc(item)} "
         f"inside a {esc(container)}. The number shown on each card is the verified coordinate metric "
-        f"for the rendering; the Friedman reference value and source information are in Details. "
+        f"for the rendering; click a card to view the Friedman reference value and source information. "
         f"Orange cards need more recovery work because the verified coordinate JSON does not yet match "
         f"the listed reference within {RECOVERY_TOLERANCE_ABS:.2f}.{updated}"
     )