Fix videos list margin with hidden menu

4 files changed, 23 insertions, 22 deletions

diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index a1d9168de..9d481d6e4 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -26,7 +26,7 @@
 
 .margin-content {
   width: $video-miniature-width * 6;
-  margin: auto;
+  margin: auto !important;
 
   @media screen and (max-width: 1800px) {
     width: $video-miniature-width * 5;
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 80d6c4fda..6e173af99 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -64,16 +64,16 @@
       margin-right: 10px;
 
       /deep/ .dropdown-root:not(.show) {
-        display: none;
+        opacity: 0;
       }
 
       /deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root {
-        display: block;
+        opacity: 1;
       }
     }
 
     &:hover .video-actions /deep/ .dropdown-root {
-      display: block;
+      opacity: 1;
     }
 
     @media screen and (max-width: $small-view) {
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 7755a729a..7e9b89dd0 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -36,25 +36,27 @@
     </div>
   </div>
 
-  <div i18n class="alert alert-warning" *ngIf="isVideoToImport()">
-    The video is being imported, it will be available when the import is finished.
-  </div>
+  <div class="row">
+    <div i18n class="col-md-12 alert alert-warning" *ngIf="isVideoToImport()">
+      The video is being imported, it will be available when the import is finished.
+    </div>
 
-  <div i18n class="alert alert-warning" *ngIf="isVideoToTranscode()">
-    The video is being transcoded, it may not work properly.
-  </div>
+    <div i18n class="col-md-12 alert alert-warning" *ngIf="isVideoToTranscode()">
+      The video is being transcoded, it may not work properly.
+    </div>
 
-  <div i18n class="alert alert-info" *ngIf="hasVideoScheduledPublication()">
-    This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }}.
-  </div>
+    <div i18n class="col-md-12 alert alert-info" *ngIf="hasVideoScheduledPublication()">
+      This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }}.
+    </div>
 
-  <div i18n class="alert alert-info" *ngIf="noPlaylistVideos">
-    This playlist does not have videos.
-  </div>
+    <div i18n class="col-md-12 alert alert-info" *ngIf="noPlaylistVideos">
+      This playlist does not have videos.
+    </div>
 
-  <div class="alert alert-danger" *ngIf="video?.blacklisted">
-    <div class="blacklisted-label" i18n>This video is blacklisted.</div>
-    {{ video.blacklistedReason }}
+    <div class="col-md-12 alert alert-danger" *ngIf="video?.blacklisted">
+      <div class="blacklisted-label" i18n>This video is blacklisted.</div>
+      {{ video.blacklistedReason }}
+    </div>
   </div>
 
   <!-- Video information -->
@@ -225,7 +227,7 @@
     <my-recommended-videos [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }" [user]="user"></my-recommended-videos>
   </div>
 
-  <div class="privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
+  <div class="row privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
     <div class="privacy-concerns-text">
       <strong i18n>Friendly Reminder: </strong>
       <ng-container i18n>
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 84b9aed39..de932c99d 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -156,6 +156,7 @@ $player-factor: 1.7; // 16/9
 
 .alert {
   text-align: center;
+  border-radius: 0;
 }
 
 #video-not-found {
@@ -427,7 +428,6 @@ my-video-comments {
 // If the view is not expanded, take into account the menu
 .privacy-concerns {
   width: calc(100% - #{$menu-width});
-  margin-left: -15px;
 }
 
 @media screen and (max-width: $small-view) {
@@ -439,7 +439,6 @@ my-video-comments {
 :host-context(.expanded) {
   .privacy-concerns {
     width: 100%;
-    margin-left: 0;
   }
 }