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:
1 parent
d82a0d6004
commit
7c1c2b390d
3 files changed
+8
-2
No files matched your search
@@ -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';
|
||||
|
||||
Reference in new issue
Block a user