Keep selected card in view when opening preview

Opening the preview panel narrows .grid-area and reflows the auto-fill grid
to fewer columns, moving the clicked card to a new row. The single-frame
scrollIntoView ran while the browser's scroll-anchoring re-adjusted scrollTop
mid-reflow, so the card scrolled out of view. Disable scroll anchoring on
.grid-area (overflow-anchor:none) and defer the scroll by two animation
frames against the settled layout, centring the card (block:'center').

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
StyxX65andClaude Fable 5 committed 2026-06-10 11:35:04 +02:00
1 parent d82a0d6004
commit 7c1c2b390d
3 files changed
+8 -2

No files matched your search

+5 -1
View File
@@ -118,7 +118,11 @@ async function openPreview(f) {
panel.classList.remove('hidden');
const _savedW = sessionStorage.getItem('gdpr_preview_width');
if (_savedW) panel.style.width = _savedW + 'px';
if (cardEl) requestAnimationFrame(() => cardEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' }));
// Opening the panel narrows .grid-area and reflows the grid to fewer columns,
// moving the selected card to a new row. Defer the scroll by two frames so it
// runs against the settled layout, and centre the card so it stays visible.
if (cardEl) requestAnimationFrame(() => requestAnimationFrame(() =>
cardEl.scrollIntoView({ behavior: 'smooth', block: 'center' })));
title.textContent = f.name;
frame.style.display = 'none';
loading.style.display = 'flex';