2 files changed, 6 insertions, 7 deletions
diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
index 0ec5f9aef..34679e9e3 100644
--- a/src/client/views/collections/CollectionStackedTimeline.scss
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -4,9 +4,8 @@
     position: absolute;
     width: 100%;
     height: 100%;
+    background: $off-white;
     z-index: 1000;
-    top: 0px;
-    // overflow-x: scroll;
 
     ::-webkit-scrollbar {
         position: relative;
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 5c02611bb..c79d21418 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -153,7 +153,6 @@ export class CollectionStackedTimeline extends CollectionSubView<
     @action
     public setZoom(zoom: number) {
         this._zoomFactor = zoom;
-        // console.log(this._timeline?.scrollWidth);
     }
 
     anchorStart = (anchor: Doc) => NumCast(anchor._timecodeToShow, NumCast(anchor[this.props.startTag]));
@@ -534,8 +533,9 @@ export class CollectionStackedTimeline extends CollectionSubView<
         );
     }
     @computed get renderAudioWaveform() {
+        console.log(this.props.mediaPath)
         return !this.props.mediaPath ? null : (
-            <div className="collectionStackedTimeline-waveform" style={{ width: `${this.zoomFactor * 100}%`, overflowX: "scroll" }}>
+            <div className="collectionStackedTimeline-waveform">
                 <AudioWaveform
                     rawDuration={this.props.rawDuration}
                     duration={this.clipDuration}
@@ -580,7 +580,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
                 ref={(timeline: HTMLDivElement | null) => (this._timeline = timeline)}
                 onClick={(e) => this.isContentActive() && StopEvent(e)}
                 onPointerDown={(e) => this.isContentActive() && this.onPointerDownTimeline(e)}
-                onPointerEnter={(e) => { console.log("scroll"); e.preventDefault(); e.stopPropagation(); }}
+                style={{ height: this.props.PanelHeight(), width: this.props.PanelWidth() }}
             >
 
                 {drawAnchors.map((d) => {
@@ -591,10 +591,10 @@ export class CollectionStackedTimeline extends CollectionSubView<
                     );
                     if (end < this.clipStart || start > this.clipEnd) return (null);
                     const left = Math.max((start - this.clipStart) / this.clipDuration * timelineContentWidth, 0);
-                    const top = (d.level / maxLevel) * this.timelineContentHeight();
+                    const top = (d.level / maxLevel) * this.props.PanelHeight();
                     const timespan = Math.max(0, end - this.clipStart) - Math.max(0, start - this.clipStart);
                     const width = (timespan / this.clipDuration) * timelineContentWidth;
-                    const height = this.timelineContentHeight() / maxLevel;
+                    const height = this.props.PanelHeight() / maxLevel;
                     return this.props.Document.hideAnchors ? null : (
                         <div
                             className={"collectionStackedTimeline-marker-timeline"}