From 7e0a60dc39ce2ad3fc8f90197f5ade7fe5e5b112 Mon Sep 17 00:00:00 2001
From: mehekj <mehek.jethani@gmail.com>
Date: Sat, 11 Sep 2021 11:47:22 -0400
Subject: fixed record buttons and trimmed marker width appearance

---
 src/client/views/collections/CollectionStackedTimeline.tsx |  8 ++++++--
 src/client/views/nodes/AudioBox.scss                       | 14 +++++++-------
 2 files changed, 13 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 51e05e278..56621d6d5 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -548,10 +548,14 @@ export class CollectionStackedTimeline extends CollectionSubView<
                     );
                     const left = this.props.trimming ?
                         (start / this.duration) * timelineContentWidth
-                        : (start - this.trimStart) / this.props.trimDuration * timelineContentWidth;
+                        : Math.max((start - this.trimStart) / this.props.trimDuration * timelineContentWidth, 0);
                     const top = (d.level / maxLevel) * this.timelineContentHeight();
                     const timespan = end - start;
-                    const width = (timespan / this.props.trimDuration) * timelineContentWidth;
+                    let width = (timespan / this.props.trimDuration) * timelineContentWidth;
+                    width = (!this.props.trimming && left == 0) ?
+                        width - ((this.trimStart - start) / this.props.trimDuration * timelineContentWidth) : width;
+                    width = (!this.props.trimming && this.trimEnd < end) ?
+                        width - ((end - this.trimEnd) / this.props.trimDuration * timelineContentWidth) : width;
                     const height = this.timelineContentHeight() / maxLevel
                     return this.props.Document.hideAnchors ? null : (
                         <div
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index ac2b19fd6..0b720ef16 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -14,7 +14,6 @@
     display: flex;
     width: 100%;
     align-items: center;
-    height: 100%;
 
     .audiobox-dictation {
       position: relative;
@@ -69,25 +68,26 @@
 
     .time {
       position: relative;
-      height: 100%;
       width: 100%;
       font-size: $large-header;
       text-align: center;
-      top: 5;
     }
 
-    .buttons {
+    .recording-buttons {
       position: relative;
       margin-top: auto;
       margin-bottom: auto;
-      width: 25px;
-      width: 25px;
-      padding: 5px;
       color: $dark-gray;
       &:hover {
         color: $black;
       }
     }
+
+    .time, .recording-buttons {
+        display: flex;
+        align-items: center;
+        padding: 5px;
+    }
   }
 
   .audiobox-controls {
-- 
cgit v1.2.3-70-g09d2