From 2abb568c4974d2ca5a0e1ae7ac2af4cdf41a01f9 Mon Sep 17 00:00:00 2001
From: Barely Removable <user@users-MacBook-Air.local>
Date: Sat, 22 Aug 2026 12:32:28 -0700
Subject: [PATCH] Slab label: promote range to the focal line when the card
 name is suppressed

---
 static/app.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/static/app.js b/static/app.js
index 5035c9f..4b3e9eb 100644
--- a/static/app.js
+++ b/static/app.js
@@ -205,19 +205,27 @@ function renderSlab(g, opts = {}) {
   const range = (g.grade_low !== null && g.grade_high !== null && g.grade_low !== g.grade_high)
     ? `realistically ${g.grade_low}–${g.grade_high}` : '';
   const title = opts.title || g.card_note || 'Card';
-  const bits = [range, `${g.confidence || ''} confidence`].filter(Boolean).join(' · ');
+  const confidence = g.confidence ? `${g.confidence} confidence` : '';
   // The kicker sits where a real slab label carries its grader's logo. It
   // says ESTIMATE first and always — the label is styled to look like the
   // real thing, so it has to say plainly that it isn't one.
   const kicker = ['Grade estimate', g.card_type ? (TYPE_LABEL[g.card_type] || 'Card') : '']
     .filter(Boolean).join(' · ');
 
+  // A label needs a focal line to sit right against the grade block. Where
+  // the card name is suppressed (the history modal already heads with it),
+  // the range takes that slot rather than leaving the face half-empty.
+  const primary = opts.hideTitle ? (range || confidence) : title;
+  const secondary = opts.hideTitle
+    ? (range ? confidence : '')
+    : [range, confidence].filter(Boolean).join(' · ');
+
   return `
     <div class="slab ${slabClass(grade)}">
       <div class="slab-main">
         <div class="slab-kicker">${esc(kicker)}</div>
-        ${opts.hideTitle ? '' : `<div class="slab-title">${esc(title)}</div>`}
-        <div class="slab-sub">${esc(bits)}</div>
+        ${primary ? `<div class="slab-title">${esc(primary)}</div>` : ''}
+        ${secondary ? `<div class="slab-sub">${esc(secondary)}</div>` : ''}
       </div>
       <div class="slab-grade">
         <span class="n">${grade === null || grade === undefined ? '—' : grade}</span>