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:
@@ -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' });
|
||||
|
||||
Reference in New Issue
Block a user