VARASYS/ZDDC
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(classifier): pin the xlsx preview's horizontal scrollbar to the window

Browse source 
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) <noreply@anthropic.com>
This commit is contained in:
ZDDC 2026-06-10 16:34:43 -05:00
parent 4b79386c4e
commit 823cfb0d48
1 changed files with 10 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
classifier/js/preview.js
View file

@ -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);