From 6a7826e55038cd27f57b3bc77535a5224216563e Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Sat, 28 Feb 2026 23:15:40 +0300
Subject: [PATCH] Fix tutorial spotlight behind sticky header and crosslink nav
 attributes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 server/src/wled_controller/static/js/features/streams.js   | 4 ++--
 server/src/wled_controller/static/js/features/tutorials.js | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/server/src/wled_controller/static/js/features/streams.js b/server/src/wled_controller/static/js/features/streams.js
index 16b25e0..c93d02f 100644
--- a/server/src/wled_controller/static/js/features/streams.js
+++ b/server/src/wled_controller/static/js/features/streams.js
@@ -1162,7 +1162,7 @@ function renderPictureSourcesList(streams) {
             detailsHtml = `<div class="stream-card-props">
                 <span class="stream-card-prop" title="${t('streams.display')}">${ICON_MONITOR} ${stream.display_index ?? 0}</span>
                 <span class="stream-card-prop" title="${t('streams.target_fps')}">${ICON_FPS} ${stream.target_fps ?? 30}</span>
-                ${capTmplName ? `<span class="stream-card-prop stream-card-link" title="${t('streams.capture_template')}" onclick="event.stopPropagation(); navigateToCard('streams','raw','raw-templates','data-id','${stream.capture_template_id}')">${ICON_TEMPLATE} ${capTmplName}</span>` : ''}
+                ${capTmplName ? `<span class="stream-card-prop stream-card-link" title="${t('streams.capture_template')}" onclick="event.stopPropagation(); navigateToCard('streams','raw','raw-templates','data-template-id','${stream.capture_template_id}')">${ICON_TEMPLATE} ${capTmplName}</span>` : ''}
             </div>`;
         } else if (stream.stream_type === 'processed') {
             const sourceStream = _cachedStreams.find(s => s.id === stream.source_stream_id);
@@ -1176,7 +1176,7 @@ function renderPictureSourcesList(streams) {
             }
             detailsHtml = `<div class="stream-card-props">
                 <span class="stream-card-prop stream-card-link" title="${t('streams.source')}" onclick="event.stopPropagation(); navigateToCard('streams','${sourceSubTab}','${sourceSection}','data-stream-id','${stream.source_stream_id}')">${ICON_LINK_SOURCE} ${sourceName}</span>
-                ${ppTmplName ? `<span class="stream-card-prop stream-card-link" title="${t('streams.pp_template')}" onclick="event.stopPropagation(); navigateToCard('streams','processed','proc-templates','data-id','${stream.postprocessing_template_id}')">${ICON_TEMPLATE} ${ppTmplName}</span>` : ''}
+                ${ppTmplName ? `<span class="stream-card-prop stream-card-link" title="${t('streams.pp_template')}" onclick="event.stopPropagation(); navigateToCard('streams','processed','proc-templates','data-pp-template-id','${stream.postprocessing_template_id}')">${ICON_TEMPLATE} ${ppTmplName}</span>` : ''}
             </div>`;
         } else if (stream.stream_type === 'static_image') {
             const src = stream.image_source || '';
diff --git a/server/src/wled_controller/static/js/features/tutorials.js b/server/src/wled_controller/static/js/features/tutorials.js
index 578b656..d6d1a54 100644
--- a/server/src/wled_controller/static/js/features/tutorials.js
+++ b/server/src/wled_controller/static/js/features/tutorials.js
@@ -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' });