Fix reclass summary and panel sizing

frontend/app.js

@@ -498,8 +498,6 @@ async function refreshReclassDetail(id) {
 
 function renderReclassDetail(data) {
   const grid = $("#results-grid")
-  const refreshing = grid.classList.contains("log-grid")
-  const scrollTop = grid.scrollTop
   $("#exif-filters").innerHTML = ""
   $("#pager").innerHTML = ""
   const filters = (data.summary.filters || data.filters.map(code => CATEGORY_NAMES[code] || code)).join(", ")
@@ -513,18 +511,30 @@ function renderReclassDetail(data) {
       </div>`).join("")
     : `<div class="empty-log">No classification changes</div>`
   grid.classList.add("log-grid")
-  grid.innerHTML = `<div class="reclass-panel">
-    <h2>Summary</h2>
-    <div class="summary-grid">
-      <span>Total</span><strong>${data.total}</strong>
-      <span>Scanned</span><strong>${data.scanned}</strong>
-      <span>Changed</span><strong>${data.changed}</strong>
-    </div>
-    <h2>Detailed log</h2>
-    <div class="log-head"><span>Post ID</span><span>From</span><span>To</span></div>
-    <div class="log-list">${log}</div>
-  </div>`
-  if (refreshing) grid.scrollTop = scrollTop
+  const panel = grid.querySelector(".reclass-panel")
+  if (panel && panel.querySelector("[data-count]")) {
+    panel.querySelector('[data-count="total"]').textContent = data.total
+    panel.querySelector('[data-count="scanned"]').textContent = data.scanned
+    panel.querySelector('[data-count="changed"]').textContent = data.changed
+    const list = panel.querySelector(".log-list")
+    if (list.innerHTML !== log) {
+      const scrollTop = list.scrollTop
+      list.innerHTML = log
+      list.scrollTop = scrollTop
+    }
+  } else {
+    grid.innerHTML = `<div class="reclass-panel">
+      <h2>Summary</h2>
+      <div class="summary-grid">
+        <div class="summary-item"><span>Total</span><strong data-count="total">${data.total}</strong></div>
+        <div class="summary-item"><span>Scanned</span><strong data-count="scanned">${data.scanned}</strong></div>
+        <div class="summary-item"><span>Changed</span><strong data-count="changed">${data.changed}</strong></div>
+      </div>
+      <h2>Detailed log</h2>
+      <div class="log-head"><span>Post ID</span><span>From</span><span>To</span></div>
+      <div class="log-list">${log}</div>
+    </div>`
+  }
   if (data.active) {
     clearTimeout(reclassDetailTimer)
     reclassDetailTimer = setTimeout(() => refreshReclassDetail(data.id), 2500)

frontend/style.css

@@ -329,10 +329,14 @@ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--a
   height: calc(100vh - 190px);
   min-height: 18rem;
   max-height: 46rem;
+  overflow: hidden;
 }
 .reclass-panel {
   display: grid;
+  grid-template-rows: auto auto auto auto minmax(0, 1fr);
   gap: .75rem;
+  height: 100%;
+  overflow: hidden;
   padding: .9rem;
   background: var(--panel);
   border: 1px solid var(--line);
@@ -343,20 +347,30 @@ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--a
   color: var(--text);
   font-size: .95rem;
 }
-.summary-grid, .log-head, .log-row {
+.log-head, .log-row {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: .5rem;
   align-items: center;
 }
 .summary-grid {
-  grid-template-columns: repeat(3, auto minmax(2rem, 1fr));
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: .75rem;
   max-width: 34rem;
   color: var(--muted);
 }
+.summary-item {
+  display: grid;
+  grid-template-columns: auto minmax(2rem, 1fr);
+  gap: .5rem;
+}
 .summary-grid strong {
   color: var(--accent);
+  font-variant-numeric: tabular-nums;
+  text-align: end;
 }
+.log-list { min-height: 0; overflow-y: auto; }
 .log-head, .log-row {
   min-height: 34px;
   padding: 0 .55rem;
@@ -520,6 +534,8 @@ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--a
   .detail-header { grid-template-columns: 1fr; }
   .exif-filters { justify-content: start; max-width: none; }
   #results-grid, #post-search-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: none; }
-  #results-grid.log-grid { height: auto; min-height: 0; }
-  .summary-grid { grid-template-columns: auto 1fr; }
+  #results-grid.log-grid { height: auto; min-height: 0; overflow: visible; }
+  .reclass-panel { height: auto; overflow: visible; }
+  .log-list { overflow: visible; }
+  .summary-grid { grid-template-columns: 1fr; }
 }