fix(adminapi): full-width layout + expandable recommendations explainer

Alexey Panfilov · claude · Alexey Panfilov · commit ca3a3ce0f04f · 2026-04-20T14:09:47.000+02:00
- Remove body max-width: 1200px cap. The admin page is data-dense (14
  columns of model metrics) and users with wide displays were stuck
  scrolling a narrow column with huge dead space on both sides. Body
  now uses the full viewport with 1.5rem/2rem padding.

- Replace the hover-only "How recommendations work" title tooltip with
  a click-expandable &lt;details&gt; block. The tooltip approach was unreliable
  across browsers for multi-line text and required hovering over a tiny
  text target; &lt;details&gt; renders the full formula inline, with a
  formatted block that wraps code samples and highlights the sections
  (Pareto / knee point / effective price / quality axis per role).

- Add .table-wrap { overflow-x: auto } so the 14-column table scrolls
  horizontally when the viewport is narrower than its natural width,
  without clipping or breaking the page.

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/internal/adminapi/templates/index.html b/internal/adminapi/templates/index.html
@@ -8,7 +8,7 @@
   <script src="/static/dzarlax.js" defer></script>
   <script src="/static/htmx.min.js" defer></script>
   <style>
-    body { padding: 1.5rem; max-width: var(--container-lg, 1200px); margin: 0 auto; }
+    body { padding: 1.5rem 2rem; margin: 0; max-width: none; }
     h1   { margin-bottom: 1rem; }
     .admin-section { margin-bottom: 2rem; }
     .filters { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
@@ -20,7 +20,16 @@
     .price-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
     .preset-banner { padding: 0.75rem 1rem; border-radius: var(--radius, 8px); background: var(--surface-2, #E8E6E3); margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
     .preset-banner .preset-meta { color: var(--text-secondary, rgba(0,0,0,0.6)); font-size: 0.875rem; margin-top: 0.25rem; }
+    .preset-banner details { margin-top: 0.5rem; font-size: 0.85em; }
+    .preset-banner details > summary { cursor: pointer; color: var(--text-secondary, rgba(0,0,0,0.6)); user-select: none; list-style: none; }
+    .preset-banner details > summary::-webkit-details-marker { display: none; }
+    .preset-banner details > summary::before { content: "▸ "; display: inline-block; transition: transform 0.15s; }
+    .preset-banner details[open] > summary::before { content: "▾ "; }
+    .preset-banner details .formula { margin-top: 0.5rem; padding: 0.5rem 0.75rem; background: rgba(0,0,0,0.04); border-left: 3px solid var(--accent, #888); border-radius: 4px; line-height: 1.45; font-size: 0.9em; }
+    .preset-banner details .formula code { background: rgba(0,0,0,0.06); padding: 0 0.25rem; border-radius: 3px; }
     .suggest-btn { margin-left: 0.5rem; }
+    .table-wrap { overflow-x: auto; }
+    .table-wrap table { width: 100%; }
   </style>
 </head>
 <body>
diff --git a/internal/adminapi/templates/partials_models_browser.html b/internal/adminapi/templates/partials_models_browser.html
@@ -24,16 +24,29 @@
       <strong>Suggesting for role:</strong> <code>{{.Filters.ActivePreset}}</code>
       <span style="color:var(--text-secondary);margin-left:0.5rem;">— {{len .Models}} candidates</span>
       <div class="preset-meta">{{.Filters.PresetDescription}}</div>
-      <div class="preset-meta" style="color:var(--text-secondary);font-size:0.85em;margin-top:0.25rem;"
-           title="Pareto frontier: model kept iff no other has both higher quality AND lower price. Then sorted by quality desc.&#10;&#10;Best value (knee point): max(quality / price) among frontier models where quality ≥ 50% of top. Hidden when the top-quality model is already best value.&#10;&#10;Effective price for non-vision candidates under simple/default/complex: 0.9 × candidate.prompt + 0.1 × multimodal_slot.prompt — assumes 10% of messages contain images.">
-        ⓘ <em>How recommendations work</em>
-      </div>
       {{if .Filters.ValueLeaderID}}
       <div class="preset-meta" style="margin-top:0.25rem;">
         <strong>Best value:</strong> <code>{{.Filters.ValueLeaderID}}</code>
         <span style="color:var(--text-secondary);">— {{.Filters.ValueLeaderHint}}</span>
       </div>
       {{end}}
+      <details>
+        <summary>How recommendations work</summary>
+        <div class="formula">
+          <strong>Pareto frontier:</strong> a model is kept iff no other candidate has both higher quality AND lower price. Frontier is then sorted by quality descending, so the top row is the best achievable quality under the filters.
+          <br><br>
+          <strong>Best value (knee point):</strong> among frontier models with quality ≥ 50% of the top, pick the one that maximises <code>quality / price</code>. Shown separately only when it's <em>not</em> the top-quality model — i.e., when there's a real trade-off to make.
+          <br><br>
+          <strong>Effective price</strong> (Eff$ column) accounts for capability fallback:
+          for <code>simple</code>/<code>default</code>/<code>complex</code>, non-vision candidates are charged
+          <code>0.9 × prompt + 0.1 × multimodal_slot.prompt</code> because image messages route to the multimodal slot. Assumes 10% of messages contain images. Vision-capable models pay nominal price.
+          <br><br>
+          <strong>Quality axis</strong> is role-specific:
+          <code>simple</code>/<code>default</code>/<code>complex</code> → AA Agentic Index;
+          <code>multimodal</code>/<code>compaction</code> → AA Intelligence Index;
+          <code>classifier</code> → 1/TTFT when speed data available, else Intelligence.
+        </div>
+      </details>
     </div>
     <button class="btn btn--ghost btn--small"
             hx-get="/models"
