Fix tutorial spotlight behind sticky header and crosslink nav attributes

Tutorial: account for sticky header height in needsScroll check so
the spotlight doesn't render behind the header at narrow viewports.

Crosslinks: fix data attribute mismatches in two navigateToCard calls
— capture template used 'data-id' instead of 'data-template-id', and
PP template used 'data-id' instead of 'data-pp-template-id'.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-28 23:15:40 +03:00
parent a89b3a25d0
commit 6a7826e550
2 changed files with 5 additions and 4 deletions

View File

@@ -314,9 +314,10 @@ function showTutorialStep(index, direction = 1) {
target.classList.add('tutorial-target');
if (isFixed) target.style.zIndex = '10001';
// Scroll target into view if off-screen (smooth animation)
// Scroll target into view if off-screen or behind sticky header
const preRect = target.getBoundingClientRect();
const needsScroll = preRect.bottom > window.innerHeight || preRect.top < 0;
const headerH = isFixed ? (parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height')) || 0) : 0;
const needsScroll = preRect.bottom > window.innerHeight || preRect.top < headerH;
if (needsScroll) {
target.scrollIntoView({ behavior: 'smooth', block: 'center' });