From e9e8f3fa8e6d2490767188ce6ef234eeb27a8a75 Mon Sep 17 00:00:00 2001
From: Pepe Ziberi <pepe@lageplan.ch>
Date: Wed, 22 Jul 2026 20:02:19 +0200
Subject: [PATCH] fix(tour): Anker repariert + robuste Hervorhebung (v1.5.8)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nach dem Topbar-Umbau zeigte die Tour auf nicht (mehr) vorhandene bzw.
grössenlose Elemente:
- data-tour="toolbar" lag auf einem display:contents-Div (0×0) → jetzt auf der
  echten Werkzeug-<aside>
- data-tour="sidebar" wurde als Prop an RightSidebar gegeben, aber nie ins DOM
  durchgereicht → jetzt direkt auf der Sidebar-<aside>
- updateHighlight ignoriert fehlende/unsichtbare/off-canvas Ziele (z.B. Sidebar
  auf dem Handy) und zeigt den Tooltip zentriert statt einer kaputten Box
- Tooltip responsiv (max-w statt fix 340px) → kein Überlauf auf schmalen Handys

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 package.json                                  |  2 +-
 src/app/app/page.tsx                          |  3 +--
 src/components/layout/left-toolbar.tsx        |  2 +-
 src/components/layout/right-sidebar.tsx       |  2 +-
 src/components/onboarding/onboarding-tour.tsx | 16 +++++++++++++---
 5 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index a5317ff..cda9b69 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lageplan",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "description": "Feuerwehr Lageplan - Krokier-App für Einsatzdokumentation",
   "private": true,
   "scripts": {
diff --git a/src/app/app/page.tsx b/src/app/app/page.tsx
index 9eb5153..a2bbd46 100644
--- a/src/app/app/page.tsx
+++ b/src/app/app/page.tsx
@@ -1015,7 +1015,7 @@ export default function AppPage() {
 
         <div className="flex-1 flex overflow-hidden">
           {/* Map view — always mounted, hidden via CSS to preserve state */}
-          <div data-tour="toolbar" className={`contents ${activeTab !== 'map' ? 'hidden' : ''}`}>
+          <div className={`contents ${activeTab !== 'map' ? 'hidden' : ''}`}>
             <LeftToolbar
               drawMode={drawMode || 'select'}
               onDrawModeChange={handleDrawModeChange}
@@ -1085,7 +1085,6 @@ export default function AppPage() {
 
           {/* Right sidebar — always visible, contains Karte/Journal tabs */}
           <RightSidebar
-            data-tour="sidebar"
             onSymbolDrop={handleSymbolDrop}
             onSymbolSelect={handleSymbolSelect}
             canEdit={canEdit}
diff --git a/src/components/layout/left-toolbar.tsx b/src/components/layout/left-toolbar.tsx
index f6e7fe6..69f61dc 100644
--- a/src/components/layout/left-toolbar.tsx
+++ b/src/components/layout/left-toolbar.tsx
@@ -75,7 +75,7 @@ export function LeftToolbar({
 }: LeftToolbarProps) {
   return (
     <TooltipProvider delayDuration={300}>
-      <aside className="w-14 lg:w-20 border-r border-border bg-card flex flex-col items-center py-1.5 lg:py-2 shrink-0 overflow-y-auto overflow-x-hidden z-10">
+      <aside data-tour="toolbar" className="w-14 lg:w-20 border-r border-border bg-card flex flex-col items-center py-1.5 lg:py-2 shrink-0 overflow-y-auto overflow-x-hidden z-10">
         {/* Draw Tools — Touch-Ziele mind. 44px auf Mobil/Tablet */}
         <div className="flex flex-col gap-0.5">
           {drawTools.map((tool) => (
diff --git a/src/components/layout/right-sidebar.tsx b/src/components/layout/right-sidebar.tsx
index c67b6e4..7650654 100644
--- a/src/components/layout/right-sidebar.tsx
+++ b/src/components/layout/right-sidebar.tsx
@@ -261,7 +261,7 @@ export function RightSidebar({ onSymbolDrop, onSymbolSelect, canEdit, isOpen, on
         </aside>
       )}
 
-      <aside className={`
+      <aside data-tour="sidebar" className={`
         w-72 md:w-48 lg:w-56 xl:w-72 border-l border-border bg-card flex flex-col shrink-0
         md:relative md:translate-x-0 md:z-auto
         fixed right-0 top-0 bottom-0 z-50 transition-transform duration-200
diff --git a/src/components/onboarding/onboarding-tour.tsx b/src/components/onboarding/onboarding-tour.tsx
index 6913413..e271eb2 100644
--- a/src/components/onboarding/onboarding-tour.tsx
+++ b/src/components/onboarding/onboarding-tour.tsx
@@ -137,8 +137,18 @@ export function OnboardingTour({ forceShow = false, onComplete }: OnboardingTour
     if (step.targetSelector) {
       const el = document.querySelector(step.targetSelector)
       if (el) {
-        setHighlightRect(el.getBoundingClientRect())
-        return
+        const rect = el.getBoundingClientRect()
+        // Nur hervorheben, wenn das Element echte Grösse hat UND im Viewport sichtbar
+        // ist. Fängt display:contents (0×0), ausgeblendete oder off-canvas-Elemente
+        // (z.B. Sidebar auf dem Handy) ab → Tooltip zentriert statt kaputte Box.
+        const visible =
+          rect.width > 4 && rect.height > 4 &&
+          rect.bottom > 0 && rect.right > 0 &&
+          rect.top < window.innerHeight && rect.left < window.innerWidth
+        if (visible) {
+          setHighlightRect(rect)
+          return
+        }
       }
     }
     setHighlightRect(null)
@@ -244,7 +254,7 @@ export function OnboardingTour({ forceShow = false, onComplete }: OnboardingTour
 
       {/* Tooltip card */}
       <div
-        className="z-[100000] w-[340px] bg-card border border-border rounded-xl shadow-2xl p-5"
+        className="z-[100000] w-[340px] max-w-[calc(100vw-32px)] bg-card border border-border rounded-xl shadow-2xl p-5"
         style={getTooltipStyle()}
       >
         <div className="flex items-start justify-between mb-2">