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
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:
@@ -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}
|
||||
|
||||
@@ -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) => (
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user