fix(timeline-editor): capture all wheel events at container level

- Add timelineContainer reference and capture wheel events with { capture: true }
- Remove redundant wheel handlers from individual sequence/effect elements
- Prevents child elements from interfering with zoom/scroll functionality

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

2 files changed, 5 insertions, 8 deletions

diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html
index d1c759d..bc7f2a0 100644
--- a/tools/timeline_editor/index.html
+++ b/tools/timeline_editor/index.html
@@ -151,7 +151,7 @@
 
         <div id="messageArea"></div>
 
-        <div class="timeline-container">
+        <div class="timeline-container" id="timelineContainer">
             <div class="playback-indicator" id="playbackIndicator"></div>
             <div class="sticky-header">
                 <div class="waveform-container" id="waveformContainer">
@@ -220,6 +220,7 @@
         // DOM
         const dom = {
             timeline: document.getElementById('timeline'),
+            timelineContainer: document.getElementById('timelineContainer'),
             timelineContent: document.getElementById('timelineContent'),
             fileInput: document.getElementById('fileInput'),
             saveBtn: document.getElementById('saveBtn'),
@@ -503,7 +504,6 @@
                 seqDiv.addEventListener('mousedown', e => startDrag(e, 'sequence', seqIndex));
                 seqDiv.addEventListener('click', e => { e.stopPropagation(); selectItem('sequence', seqIndex); });
                 seqDiv.addEventListener('dblclick', e => { e.stopPropagation(); e.preventDefault(); seq._collapsed = !seq._collapsed; renderTimeline(); });
-                seqDiv.addEventListener('wheel', e => viewportController.handleWheel(e), { passive: false });
                 dom.timeline.appendChild(seqDiv);
                 if (!seq._collapsed) {
                     const conflicts = detectConflicts(seq);
@@ -534,7 +534,6 @@
                             if (!e.target.classList.contains('effect-handle')) { e.stopPropagation(); startDrag(e, 'effect', seqIndex, effectIndex); }
                         });
                         effectDiv.addEventListener('click', e => { e.stopPropagation(); selectItem('effect', seqIndex, effectIndex); });
-                        effectDiv.addEventListener('wheel', e => viewportController.handleWheel(e), { passive: false });
                         dom.timeline.appendChild(effectDiv);
                     });
                 }
diff --git a/tools/timeline_editor/timeline-viewport.js b/tools/timeline_editor/timeline-viewport.js
index 196368e..c0e3cf5 100644
--- a/tools/timeline_editor/timeline-viewport.js
+++ b/tools/timeline_editor/timeline-viewport.js
@@ -22,17 +22,15 @@ export class ViewportController {
         // Scroll sync
         this.dom.timelineContent.addEventListener('scroll', () => this.handleScroll());
 
-        // Wheel handling
+        // Wheel handling - capture at container level to override all child elements
         const wheelHandler = e => this.handleWheel(e);
-        this.dom.timelineContent.addEventListener('wheel', wheelHandler, { passive: false });
-        this.dom.waveformContainer.addEventListener('wheel', wheelHandler, { passive: false });
+        this.dom.timelineContainer.addEventListener('wheel', wheelHandler, { passive: false, capture: true });
 
-        // Prevent wheel bubbling from UI containers
+        // Prevent wheel bubbling from UI containers outside timeline
         document.querySelector('header').addEventListener('wheel', e => e.stopPropagation());
         this.dom.propertiesPanel.addEventListener('wheel', e => e.stopPropagation());
         document.querySelector('.zoom-controls').addEventListener('wheel', e => e.stopPropagation());
         document.querySelector('.stats').addEventListener('wheel', e => e.stopPropagation());
-        document.getElementById('timeMarkers').addEventListener('wheel', e => e.stopPropagation());
 
         // Waveform hover tracking
         this.dom.waveformContainer.addEventListener('mouseenter', () => this.showWaveformCursor());