fix(timeline-editor): improve mouse-wheel handling and prevent UI interference

- Extract wheel handler to support both timeline and waveform scrolling
- Add wheel event support to waveform container for horizontal scroll/zoom
- Block wheel event propagation from header, properties panel, zoom controls, and stats

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

1 files changed, 11 insertions, 2 deletions

diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html
index 363c5cb..775330f 100644
--- a/tools/timeline_editor/index.html
+++ b/tools/timeline_editor/index.html
@@ -1038,7 +1038,7 @@
             updateIndicatorPosition(timeToBeats(state.playbackOffset), false);
         });
 
-        dom.timelineContent.addEventListener('wheel', e => {
+        const handleWheel = e => {
             e.preventDefault();
             if (e.ctrlKey || e.metaKey) {
                 const rect = dom.timelineContent.getBoundingClientRect(), mouseX = e.clientX - rect.left;
@@ -1074,7 +1074,16 @@
             const targetScrollTop = state.sequences[targetSeqIndex]?._yPosition || 0;
             const currentScrollTop = dom.timelineContent.scrollTop, scrollDiff = targetScrollTop - currentScrollTop;
             if (Math.abs(scrollDiff) > 5) dom.timelineContent.scrollTop += scrollDiff * VERTICAL_SCROLL_SPEED;
-        }, { passive: false });
+        };
+
+        dom.timelineContent.addEventListener('wheel', handleWheel, { passive: false });
+        dom.waveformContainer.addEventListener('wheel', handleWheel, { passive: false });
+
+        // Prevent wheel events from bubbling up from UI containers
+        document.querySelector('header').addEventListener('wheel', e => e.stopPropagation());
+        dom.propertiesPanel.addEventListener('wheel', e => e.stopPropagation());
+        document.querySelector('.zoom-controls').addEventListener('wheel', e => e.stopPropagation());
+        document.querySelector('.stats').addEventListener('wheel', e => e.stopPropagation());
 
         window.addEventListener('resize', renderTimeline);
         renderTimeline(); loadFromURLParams();