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 = {}) {
`;
}).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 = {}) {
${esc(changes)}${tag ? ` · ${esc(tag)}` : ""}
`;
- });
- const hidden = recent.length - shown.length;
- if (hidden > 0) {
- rows.push(`
- ${hidden} earlier ${hidden === 1 ? "sync" : "syncs"} →
- `);
- }
- 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; }