From d0efc9a9072ca731a6bfabcc52bc44aaae2f53da Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 23 Jan 2019 17:03:23 -0500
Subject: [PATCH] Add container with overflow hidden to prevent scrollbars from
 playhead

---
 src/components/audio-trimmer/audio-trimmer.css |  9 +++++++++
 src/components/audio-trimmer/audio-trimmer.jsx | 14 ++++++++------
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/audio-trimmer/audio-trimmer.css b/src/components/audio-trimmer/audio-trimmer.css
index 3d9fa65a1..63af2a0cb 100644
--- a/src/components/audio-trimmer/audio-trimmer.css
+++ b/src/components/audio-trimmer/audio-trimmer.css
@@ -53,6 +53,15 @@ $hover-scale: 2;
     border: 1px solid $red-tertiary;
 }
 
+.playhead-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
 .playhead {
     /*
         Even though playhead is just a line, it is 100% width (the width of the waveform)
diff --git a/src/components/audio-trimmer/audio-trimmer.jsx b/src/components/audio-trimmer/audio-trimmer.jsx
index e2ad295fc..87ca75a98 100644
--- a/src/components/audio-trimmer/audio-trimmer.jsx
+++ b/src/components/audio-trimmer/audio-trimmer.jsx
@@ -32,12 +32,14 @@ const AudioTrimmer = props => (
         )}
 
         {props.playhead ? (
-            <Box
-                className={classNames(styles.trimLine, styles.playhead)}
-                style={{
-                    transform: `translateX(${100 * props.playhead}%)`
-                }}
-            />
+            <div className={styles.playheadContainer}>
+                <div
+                    className={classNames(styles.trimLine, styles.playhead)}
+                    style={{
+                        transform: `translateX(${100 * props.playhead}%)`
+                    }}
+                />
+            </div>
         ) : null}
 
         {props.trimEnd === null ? null : (