From b712dd55723af15e7f86c12828eaa866a86ad3e7 Mon Sep 17 00:00:00 2001
From: Claude Dev <claude-dev@aegis-sight.de>
Date: Mon, 23 Mar 2026 22:37:28 +0100
Subject: [PATCH] Tutorial: Bubble-Reposition nach Modal-Transition (450ms
 Delay)

Modal braucht Zeit fuer CSS-Transition. Erste Positionierung war falsch
weil getBoundingClientRect() waehrend Animation falsche Werte liefert.
Jetzt wird nach 450ms nochmal komplett repositioniert inkl. Clamp + Arrow.
---
 src/static/js/tutorial.js | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/static/js/tutorial.js b/src/static/js/tutorial.js
index b9e65f5..16c1707 100644
--- a/src/static/js/tutorial.js
+++ b/src/static/js/tutorial.js
@@ -1400,6 +1400,41 @@ const Tutorial = {
         // Bubble konfigurieren und anzeigen
         this._showBubble(step, i);
 
+        // Modal-Steps: Bubble nach Modal-Transition nochmal neu positionieren
+        if (isModalStep) {
+            var self2 = this;
+            setTimeout(function() {
+                if (self2._isActive && self2._currentStep === i) {
+                    self2._positionBubble(step);
+                    // Clamp + Arrow nochmal ausfuehren
+                    requestAnimationFrame(function() {
+                        var bubble = self2._els.bubble;
+                        var bRect = bubble.getBoundingClientRect();
+                        var vH = window.innerHeight;
+                        var cTop = parseFloat(bubble.style.top) || 0;
+                        if (bRect.bottom > vH - 8) {
+                            bubble.style.top = (cTop - (bRect.bottom - vH + 16)) + 'px';
+                        }
+                        bRect = bubble.getBoundingClientRect();
+                        if (bRect.top < 8) {
+                            bubble.style.top = (parseFloat(bubble.style.top) + (8 - bRect.top)) + 'px';
+                        }
+                        var at = step.bubbleTarget || step.target;
+                        if (at && (bubble.className.indexOf('pos-left') !== -1 || bubble.className.indexOf('pos-right') !== -1)) {
+                            var te = document.querySelector(at);
+                            if (te) {
+                                bRect = bubble.getBoundingClientRect();
+                                var tR = te.getBoundingClientRect();
+                                var ay = (tR.top + tR.height / 2) - bRect.top;
+                                ay = Math.max(18, Math.min(ay, bRect.height - 18));
+                                bubble.style.setProperty('--arrow-top', ay + 'px');
+                            }
+                        }
+                    });
+                }
+            }, 450);
+        }
+
         // onEnter-Callback
         if (step.onEnter) {
             step.onEnter();