From d299cdbdf440e986e560818355824bc5c39bf3e0 Mon Sep 17 00:00:00 2001 From: Claude Dev Date: Mon, 23 Mar 2026 22:25:56 +0100 Subject: [PATCH] Tutorial: Bubble wird oben und unten im Viewport geclampt Verhindert dass Schritt 10 und andere Steps mit weit unten liegenden Feldern unter den Viewport rutschen. --- src/static/js/tutorial.js | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/static/js/tutorial.js b/src/static/js/tutorial.js index 87279a0..9673c8b 100644 --- a/src/static/js/tutorial.js +++ b/src/static/js/tutorial.js @@ -1495,15 +1495,28 @@ const Tutorial = { // Sichtbar machen bubble.classList.add('visible'); - // Sicherheitscheck: Bubble nicht unter Viewport-Rand + // Sicherheitscheck: Bubble komplett im sichtbaren Bereich halten var self = this; requestAnimationFrame(function() { var bRect = bubble.getBoundingClientRect(); var vHeight = window.innerHeight; - if (bRect.bottom > vHeight - 8) { - var shift = bRect.bottom - vHeight + 16; - var currentTop = parseFloat(bubble.style.top) || 0; + var currentTop = parseFloat(bubble.style.top) || 0; + // Transform beruecksichtigen (translateY(-100%) bei top-Position) + var transform = bubble.style.transform || ''; + var actualTop = bRect.top; + var actualBottom = bRect.bottom; + // Unten abgeschnitten + if (actualBottom > vHeight - 8) { + var shift = actualBottom - vHeight + 16; bubble.style.top = (currentTop - shift) + 'px'; + bubble.style.transform = transform.replace('translateY(-100%)', ''); + } + // Oben abgeschnitten + bRect = bubble.getBoundingClientRect(); + if (bRect.top < 8) { + currentTop = parseFloat(bubble.style.top) || 0; + bubble.style.top = (currentTop + (8 - bRect.top)) + 'px'; + bubble.style.transform = bubble.style.transform.replace('translateY(-100%)', ''); } }); },