From 66221eb17f989d2bc2a8435484a7804f41ed763d Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Mon, 13 Jul 2026 15:59:42 +0200
Subject: [PATCH] =?UTF-8?q?fixup!=20=E2=9C=A8(frontend)=20add=20ScreenShar?=
 =?UTF-8?q?eZoomableVideo=20component=20for=20zoomable=20screen=20shares?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../livekit/components/ScreenShareZoomableVideo.tsx  | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

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<HTMLDivElement>(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 */}
       <div
+        ref={zoomSurfaceRef}
         className={css({
           width: '100%',
           height: '100%',
@@ -70,7 +81,6 @@ export const ScreenShareZoomableVideo = ({
         style={{
           cursor: panCursor,
         }}
-        onWheel={zoom.handleWheel}
         onMouseDown={zoom.handlePanStart}
         onMouseMove={zoom.handlePanMove}
         onMouseUp={zoom.handlePanEnd}