fix: pass through wheel events when content is not scrollable

Only apply special wheel event handling when the pre element actually has a scrollbar.
Otherwise, let the browser handle default scrolling behavior. This ensures proper
event bubbling when content is too small to need scrolling.

Signed-off-by: Eric Wheeler <[email protected]>

Author: Eric Wheeler

webview-ui/src/components/common/CodeBlock.tsx

@@ -507,6 +507,15 @@ const CodeBlock = memo(
 				}
 				if (!preRef.current) return
 
+				// Only handle wheel events if the inner container has a scrollbar,
+				// otherwise let the browser handle the default scrolling
+				const hasScrollbar = preRef.current.scrollHeight > preRef.current.clientHeight
+
+				// Pass through events if we don't need special handling
+				if (!hasScrollbar) {
+					return
+				}
+
 				const scrollContainer = getScrollContainer()
 				if (!scrollContainer) return
 
@@ -515,11 +524,6 @@ const CodeBlock = memo(
 				const isAtVeryBottom =
 					Math.abs(preRef.current.scrollHeight - preRef.current.scrollTop - preRef.current.clientHeight) < 1
 
-				// No need to set userHasScrolled here anymore, the scroll listener handles it
-				// if (e.deltaY < 0 && !isAtVeryTop) {
-				// 	setUserHasScrolled(true)
-				// }
-
 				// Handle scrolling at container boundaries
 				if ((e.deltaY < 0 && isAtVeryTop) || (e.deltaY > 0 && isAtVeryBottom)) {
 					// Prevent default to stop inner container from handling
@@ -537,15 +541,11 @@ const CodeBlock = memo(
 
 			// Add wheel event listener to inner container
 			const preElement = preRef.current
-			if (preElement) {
-				preElement.addEventListener("wheel", handleWheel, { passive: false })
-			}
+			preElement.addEventListener("wheel", handleWheel, { passive: false })
 
 			// Clean up
 			return () => {
-				if (preElement) {
-					preElement.removeEventListener("wheel", handleWheel)
-				}
+				preElement.removeEventListener("wheel", handleWheel)
 
 				// Cancel any ongoing animation
 				if (animationFrameId) {