improve likes-dislikes bar usability

2 files changed, 23 insertions, 7 deletions

diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 9e653ea78..b3def01fa 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -114,13 +114,19 @@
                   ></my-video-actions-dropdown>
                 </div>
 
-                <div
-                  class="video-info-likes-dislikes-bar"
-                  *ngIf="video.likes !== 0 || video.dislikes !== 0"
-                  [ngbTooltip]="likesBarTooltipText"
-                  placement="bottom"
-                >
-                  <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
+                <div class="video-info-likes-dislikes-bar-outerContainer">
+                  <div
+                    class="video-info-likes-dislikes-bar-innerContainer"
+                    *ngIf="video.likes !== 0 || video.dislikes !== 0"
+                    [ngbTooltip]="likesBarTooltipText"
+                    placement="bottom"
+                  >
+                    <div
+                      class="video-info-likes-dislikes-bar"
+                    >
+                      <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
+                    </div>
+                  </div>
                 </div>
               </div>
 
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 15335b0b3..a8400c196 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -209,6 +209,7 @@ $video-info-margin-left: 44px;
       .video-actions-rates {
         margin: 0 0 10px 0;
         align-items: start;
+        align-self: end;
         width: max-content;
 
         .video-actions {
@@ -295,6 +296,15 @@ $video-info-margin-left: 44px;
           }
         }
 
+        .video-info-likes-dislikes-bar-outerContainer {
+          position: relative;
+        }
+
+        .video-info-likes-dislikes-bar-innerContainer {
+          position: absolute;
+          height: 30px;
+        }
+
         .video-info-likes-dislikes-bar {
           $likes-bar-height: 2px;
           height: $likes-bar-height;