From 196b7790d60c0b374b45d061b9dcbde3ccb80b3e Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 7 Feb 2018 11:02:56 +0100
Subject: [PATCH] Fix title and action buttons in video watch

---
 .../videos/+video-watch/video-watch.component.html    |  2 +-
 .../videos/+video-watch/video-watch.component.scss    | 11 +++++++----
 2 files changed, 8 insertions(+), 5 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 74ead1b76..af90e22a1 100644
--- 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 6104da94f..c88596196 100644
--- 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;