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

@@ -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 currentTop = parseFloat(bubble.style.top) || 0;
-                var shift = bRect.bottom - vHeight + 16;
+            // Transform beruecksichtigen (translateY(-100%) bei top-Position)
-                var currentTop = parseFloat(bubble.style.top) || 0;
+            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%)', '');
             }
         });
     },