From 44f495ca8bfe641867548f8b5e7fee6c3f30e50f Mon Sep 17 00:00:00 2001 From: Marcel Date: Fri, 27 Mar 2026 17:05:26 +0100 Subject: [PATCH] fix(touch): enable annotation drawing and hover on touch devices - Add touch-action:none to container when in annotate mode so the browser doesn't intercept touch gestures for scroll/pan - Replace onmouseenter/onmouseleave with onpointerenter/onpointerleave so the highlight effect also fires on touch/stylus Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/lib/components/AnnotationLayer.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/lib/components/AnnotationLayer.svelte b/frontend/src/lib/components/AnnotationLayer.svelte index 34ca26d2..3d79b61b 100644 --- a/frontend/src/lib/components/AnnotationLayer.svelte +++ b/frontend/src/lib/components/AnnotationLayer.svelte @@ -93,7 +93,7 @@ function handlePointerUp(event: PointerEvent) { let hoveredId = $state(null); const containerStyle = $derived( - `position: absolute; top: 0; left: 0; width: 100%; height: 100%;${canAnnotate ? ' cursor: crosshair;' : ''}` + `position: absolute; top: 0; left: 0; width: 100%; height: 100%;${canAnnotate ? ' cursor: crosshair; touch-action: none;' : ''}` ); @@ -113,8 +113,8 @@ const containerStyle = $derived( aria-label="Kommentare anzeigen" onclick={() => onAnnotationClick?.(annotation.id)} onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') onAnnotationClick?.(annotation.id); }} - onmouseenter={() => (hoveredId = annotation.id)} - onmouseleave={() => (hoveredId = null)} + onpointerenter={() => (hoveredId = annotation.id)} + onpointerleave={() => (hoveredId = null)} style=" position: absolute; left: {annotation.x * 100}%;