diff --git a/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomableVideo.tsx b/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomableVideo.tsx index 68ca349a..ce59442c 100644 --- a/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomableVideo.tsx +++ b/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomableVideo.tsx @@ -50,6 +50,16 @@ export const ScreenShareZoomableVideo = ({ return () => el.removeEventListener('keydown', zoom.handleKeyDown) }, [tileRef, zoom.handleKeyDown]) + // Native wheel listener so we can use { passive: false } and preventDefault. + // React onWheel is passive — Ctrl+scroll would zoom the whole browser page. + const zoomSurfaceRef = useRef(null) + useEffect(() => { + const el = zoomSurfaceRef.current + if (!el) return + el.addEventListener('wheel', zoom.handleWheel, { passive: false }) + return () => el.removeEventListener('wheel', zoom.handleWheel) + }, [zoom.handleWheel]) + let panCursor: React.CSSProperties['cursor'] = 'default' if (zoom.isZoomed) { panCursor = zoom.isDragging ? 'grabbing' : 'grab' @@ -60,6 +70,7 @@ export const ScreenShareZoomableVideo = ({ {/* Pan/zoom surface - Ctrl+wheel to zoom, drag when zoomed. */} {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}