From 49e306803e57648b42617c23d364ce92e0ab6fdd Mon Sep 17 00:00:00 2001
From: Seungpyo1007 <rush94434@gmail.com>
Date: Wed, 24 Jun 2026 10:03:09 +0900
Subject: [PATCH] fix(site): show the full dump history again, scrollable
 instead of capped
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Capping the timeline list to the recent 8 reintroduced the original problem — older
syncs were hidden. Show every sync again (now that rows are clean, growth-first lines
rather than a wall of repeated commit names) and cap the list height with a scroll
instead, so the whole history stays reachable without making the section huge.

Refs #1
---
 site/src/scripts/techapi.js | 18 ++++--------------
 site/src/styles/techapi.css | 14 ++++++++++----
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/site/src/scripts/techapi.js b/site/src/scripts/techapi.js
index 71e5ed53356..694b711c81b 100644
--- a/site/src/scripts/techapi.js
+++ b/site/src/scripts/techapi.js
@@ -293,12 +293,9 @@ function countUp(node, target, opts = {}) {
       </a>`;
     }).join("");
 
-    // The chart already shows every sync; the list is the recent detail — cap it
-    // so the section stays compact, with a link to the full commit history.
-    const LIST_MAX = 8;
-    const recent = points.slice().reverse();
-    const shown = recent.slice(0, LIST_MAX);
-    const rows = shown.map((point) => {
+    // Show every sync (newest first), growth-first. The list scrolls (CSS
+    // max-height) so the full history stays reachable without a giant section.
+    listEl.innerHTML = points.slice().reverse().map((point) => {
       const changes = point.changes.length
         ? point.changes.map((row) => `${shortLabel[row.key]} ${formatDelta(row.delta)}`).join(", ")
         : (point.baseline ? "baseline snapshot" : `total ${formatDelta(point.delta)}`);
@@ -312,14 +309,7 @@ function countUp(node, target, opts = {}) {
         </a>
         <small>${esc(changes)}${tag ? ` · ${esc(tag)}` : ""}</small>
       </span></li>`;
-    });
-    const hidden = recent.length - shown.length;
-    if (hidden > 0) {
-      rows.push(`<li class="history-more"><span class="history-dot is-faint"></span><span>
-        <a href="https://github.com/GetTechAPI/TechAPI/commits/main/site/public/v1/index.json" target="_blank" rel="noopener">${hidden} earlier ${hidden === 1 ? "sync" : "syncs"} →</a>
-      </span></li>`);
-    }
-    listEl.innerHTML = rows.join("");
+    }).join("");
   }
 
   const fmtWhen = (date) => date
diff --git a/site/src/styles/techapi.css b/site/src/styles/techapi.css
index 41dfcb84586..051979c36fd 100644
--- a/site/src/styles/techapi.css
+++ b/site/src/styles/techapi.css
@@ -301,7 +301,16 @@ code, .mono { font-family: var(--mono); }
   padding: 0;
   display: grid;
   gap: 14px;
-}
+  /* full history stays reachable, but the panel never balloons */
+  max-height: 340px;
+  overflow-y: auto;
+  padding-right: 8px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+.history-list::-webkit-scrollbar { width: 8px; }
+.history-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
+.history-list::-webkit-scrollbar-track { background: transparent; }
 .history-chart {
   min-height: 210px;
   margin-top: 18px;
@@ -404,9 +413,6 @@ code, .mono { font-family: var(--mono); }
   font-size: 11.5px;
   color: var(--muted);
 }
-.history-more a { font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 500; }
-.history-more a:hover { color: var(--accent-text); }
-.history-dot.is-faint { background: var(--faint); box-shadow: none; }
 @media (max-width: 760px) {
   .history { grid-template-columns: 1fr; }
   .history-grid { grid-template-columns: 1fr; }