fix: fit view — defer layout measurement to rAF, stretch pre to fill tile
Bug 1: applyFitLayout measured parentElement.clientHeight before the
browser reflowed the DOM — returned 0 on first render. Fix: wrap in
requestAnimationFrame so measurement happens after layout pass.
Applies to all three call sites: renderGrid(), applyDisplaySettings(),
and the window resize handler.
Bug 2: .tile-body pre had position:absolute bottom:0 but no top:0.
In fit mode (taller tiles), content sat at the bottom with a gap above.
Fix: .session-grid--fit .tile-body pre { top: 0; overflow-y: auto }
This commit is contained in:
@@ -652,7 +652,7 @@ function renderGrid(sessions) {
|
||||
var currentMode = currentDs.viewMode || 'auto';
|
||||
if (currentMode === 'fit' && grid) {
|
||||
grid.classList.add('session-grid--fit');
|
||||
applyFitLayout(grid);
|
||||
requestAnimationFrame(function() { applyFitLayout(grid); });
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1191,7 +1191,7 @@ function applyDisplaySettings(ds) {
|
||||
|
||||
} else if (mode === 'fit') {
|
||||
grid.classList.add('session-grid--fit');
|
||||
applyFitLayout(grid);
|
||||
requestAnimationFrame(function() { applyFitLayout(grid); });
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1858,7 +1858,7 @@ window.addEventListener('resize', function() {
|
||||
var ds = loadDisplaySettings();
|
||||
if ((ds.viewMode || 'auto') === 'fit') {
|
||||
var grid = document.getElementById('session-grid');
|
||||
if (grid) applyFitLayout(grid);
|
||||
if (grid) requestAnimationFrame(function() { applyFitLayout(grid); });
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -1380,6 +1380,12 @@ body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* In fit mode, stretch pre to fill the full tile body height (not just bottom-anchor) */
|
||||
.session-grid--fit .tile-body pre {
|
||||
top: 0; /* stretch to fill full tile body height in fit mode */
|
||||
overflow-y: auto; /* scroll if content exceeds the tile */
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Responsive overlay sidebar at <960px
|
||||
============================================================ */
|
||||
|
||||
@@ -2204,3 +2204,11 @@ test('bindStaticEventListeners wires view-mode-btn click to cycleViewMode', () =
|
||||
'bindStaticEventListeners must wire #view-mode-btn click handler'
|
||||
);
|
||||
});
|
||||
|
||||
test('applyFitLayout is called via requestAnimationFrame for correct timing', () => {
|
||||
const source = fs.readFileSync(new URL('../app.js', import.meta.url), 'utf8');
|
||||
assert.ok(
|
||||
source.includes('requestAnimationFrame') && source.includes('applyFitLayout'),
|
||||
'applyFitLayout must be deferred via requestAnimationFrame'
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user