fix(tour): Anker repariert + robuste Hervorhebung (v1.5.8)
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 33m4s

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>
This commit is contained in:
Pepe Ziberi
2026-07-22 20:02:19 +02:00
parent a4d0a10794
commit e9e8f3fa8e
5 changed files with 17 additions and 8 deletions

View File

@@ -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}

View File

@@ -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) => (

View File

@@ -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

View File

@@ -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">