diff --git a/assets/css/main.scss b/assets/css/main.scss
index 6e5ee2d3..4f9c1146 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -298,7 +298,8 @@ $videoBarProgressHeight: 0.4rem;
     float: left;
     flex: 2;
     height: $videoBarHeight - 4*$videoBarBtnMargin;
-    margin: 2*$videoBarBtnMargin $videoBarBtnMargin;
+    padding: 2*$videoBarBtnMargin 0;
+    margin: 0 $videoBarBtnMargin;
     cursor: pointer;
     -webkit-user-select: none;
     user-select: none;
@@ -312,12 +313,13 @@ $videoBarProgressHeight: 0.4rem;
       // comment in to make it visible without hover
       // visibility: visible !important; // toggle
       // opacity: 1 !important; // toggle
+
       opacity: 0;
       visibility: collapse;
 
       position: absolute;
       // Position flush to the top of the video controls (i.e. full overlap)
-      top: -2*$videoBarBtnMargin;
+      top: -1*$videoBarBtnMargin;
       // add device dependent gap. On touch devices leave more space so the
       // finger doesn't obscure it
       margin-top: -1.5rem;
@@ -340,6 +342,7 @@ $videoBarProgressHeight: 0.4rem;
       transition: opacity 0.2s ease-in-out, visibility 0.2s;
       pointer-events: none;
       z-index: 1;
+      line-height: 1.3rem;
     }
 
     // for devices with mouse