made hover time more visible

2 files changed, 6 insertions, 4 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
index f9cf5cd4e..bb98e1c99 100644
--- a/src/client/views/collections/CollectionStackedTimeline.scss
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -16,7 +16,8 @@
 }
 
 .timeline-container:hover + .timeline-hoverUI {
-    display: block;
+    display: flex;
+    justify-content: center;
 }
 
 ::-webkit-scrollbar {
@@ -135,9 +136,10 @@
     display: none;
 
     .hoverTime {
+        position: absolute;
         color: $dark-gray;
-        text-align: center;
-        transform: translate(0, -17px);
+        transform: translate(0, -100%);
+
         font-weight: bold;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 850aa5dbe..8bdcfeea9 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -773,8 +773,8 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                 </div>
             </div>
             <div className="timeline-hoverUI" style={{ left: `calc(${((this._hoverTime - this.clipStart) / this.clipDuration) * 100}%` }}>
-                {this._thumbnail && <img className="videoBox-thumbnail" src={this._thumbnail} />}
                 <div className="hoverTime">{formatTime(this._hoverTime)}</div>
+                {this._thumbnail && <img className="videoBox-thumbnail" src={this._thumbnail} />}
             </div>
         </div >);
     }