Fix title and action buttons in video watch

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 74ead1b76437513be59248ce5f8b7a662a4f89d8..af90e22a19eb33f851eb4019c7f3a2d51593354f 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -44,7 +44,7 @@
               <span class="icon icon-dislike" title="Dislike this video"></span>
             </div>
 
-            <div (click)="showShareModal()" class="action-button">
+            <div (click)="showShareModal()" class="action-button action-button-share">
               <span class="icon icon-share"></span>
               Share
             </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 6104da94ff2db886141a25718d07a2c5ec00e2ab..c8859619664d71438d56d3116e4f0f073fd07f63 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -42,13 +42,13 @@
     .video-info-first-row {
       display: flex;
 
-      & div:first-child {
+      & > div:first-child {
         flex-grow: 1;
       }
 
       .video-info-name {
         margin-right: 30px;
-        height: 40px; // Align with the action buttons
+        min-height: 40px; // Align with the action buttons
         font-size: 27px;
         font-weight: $font-semibold;
         flex-grow: 1;
@@ -80,11 +80,10 @@
       .video-actions-rates {
         display: flex;
         flex-direction: column;
-        align-items: end;
+        align-items: flex-end;
 
         .video-actions {
           height: 40px; // Align with the title
-          min-width: 215px;
           display: flex;
           align-items: center;
 
@@ -125,6 +124,10 @@
               }
             }
 
+            &.action-button-share {
+              width: 82px;
+            }
+
             &.action-button-like.activated {
               background-color: #39CC0B;