1 files changed, 11 insertions, 5 deletions
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 82a6b2a66..37fd42bc1 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -89,6 +89,8 @@ export class CollectionStackedTimeline extends CollectionSubView<
 
     @observable _zoomFactor: number = 1;
 
+    @observable _scroll: number = 0;
+
     get minTrimLength() { return this._timeline?.getBoundingClientRect() ? 0.05 * this.clipDuration : 0; }
     @computed get trimStart() { return this.IsTrimming !== TrimScope.None ? this._trimStart : this.clipStart; }
     @computed get trimDuration() { return this.trimEnd - this.trimStart; }
@@ -219,7 +221,6 @@ export class CollectionStackedTimeline extends CollectionSubView<
     @action
     onPointerDownTimeline = (e: React.PointerEvent): void => {
         const rect = this._timeline?.getBoundingClientRect();
-        const scrollLeft = this._timeline?.scrollLeft;
         const clientX = e.clientX;
         const diff = rect ? clientX - rect?.x : null;
         const shiftKey = e.shiftKey;
@@ -344,6 +345,11 @@ export class CollectionStackedTimeline extends CollectionSubView<
     }
 
     @action
+    setScroll = (e: React.MouseEvent) => {
+        this._scroll = e.currentTarget.scrollLeft;
+    }
+
+    @action
     internalDocDrop(e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData, xp: number) {
         if (!de.embedKey && this.props.layerProvider?.(this.props.Document) !== false && this.props.Document._isGroup) return false;
         if (!super.onInternalDrop(e, de)) return false;
@@ -533,7 +539,6 @@ export class CollectionStackedTimeline extends CollectionSubView<
         );
     }
     @computed get renderAudioWaveform() {
-        console.log(this.props.mediaPath)
         return !this.props.mediaPath ? null : (
             <div className="collectionStackedTimeline-waveform">
                 <AudioWaveform
@@ -563,7 +568,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
     }
 
     render() {
-        const timelineContentWidth = this.props.PanelWidth() * this.zoomFactor;
+        const timelineContentWidth = this.props.PanelWidth() * this.zoomFactor - 4; // subtract size of container border
         const overlaps: {
             anchorStartTime: number;
             anchorEndTime: number;
@@ -576,7 +581,8 @@ export class CollectionStackedTimeline extends CollectionSubView<
         const maxLevel = overlaps.reduce((m, o) => Math.max(m, o.level), 0) + 2;
         return (<div ref={this.createDashEventsTarget} style={{ pointerEvents: SnappingManager.GetIsDragging() ? "all" : undefined }}>
             <div className="timeline-container"
-                style={{ width: this.props.PanelWidth() }}>
+                style={{ width: this.props.PanelWidth() }}
+                onScroll={this.setScroll}>
                 <div
                     className="collectionStackedTimeline"
                     ref={(timeline: HTMLDivElement | null) => (this._timeline = timeline)}
@@ -616,7 +622,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
                                     mark={d.anchor}
                                     rangeClickScript={this.rangeClickScript}
                                     rangePlayScript={this.rangePlayScript}
-                                    left={left}
+                                    left={left - this._scroll}
                                     top={top}
                                     width={width}
                                     height={height}