From 823cfb0d4829b2b74f602a818a9bbfab7c6b644c Mon Sep 17 00:00:00 2001 From: ZDDC Date: Wed, 10 Jun 2026 16:34:43 -0500 Subject: [PATCH] fix(classifier): pin the xlsx preview's horizontal scrollbar to the window MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The sheet rendered into #previewContent (flex:1) with an inner table scroller also set to flex:1 — but #previewContent wasn't a flex column, so the inner flex:1 was ignored and the scroller grew to the full sheet height, dropping the horizontal scrollbar to the very bottom of the content. Make #previewContent a height-constrained flex column (and give the scroller min-height:0) so the table area fills the viewport and its h-scrollbar sits at the window bottom. Co-Authored-By: Claude Opus 4.8 (1M context) --- classifier/js/preview.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/classifier/js/preview.js b/classifier/js/preview.js index 4a39145..6f550ae 100644 --- a/classifier/js/preview.js +++ b/classifier/js/preview.js @@ -410,10 +410,18 @@ const workbook = XLSX.read(arrayBuffer, { type: 'array' }); container.innerHTML = ''; - + // Make the content area a height-constrained flex column so the table + // scroller below fills the viewport — its horizontal scrollbar then + // sits at the window bottom instead of at the bottom of a tall sheet. + container.style.display = 'flex'; + container.style.flexDirection = 'column'; + container.style.minHeight = '0'; + container.style.overflow = 'hidden'; + if (workbook.SheetNames.length > 1) { const tabs = previewWindow.document.createElement('div'); tabs.className = 'sheet-tabs'; + tabs.style.flexShrink = '0'; workbook.SheetNames.forEach((name, i) => { const tab = previewWindow.document.createElement('button'); tab.className = 'sheet-tab' + (i === 0 ? ' active' : ''); @@ -430,6 +438,7 @@ const tableContainer = previewWindow.document.createElement('div'); tableContainer.style.flex = '1'; + tableContainer.style.minHeight = '0'; // allow it to shrink so overflow scrolls tableContainer.style.overflow = 'auto'; container.appendChild(tableContainer);