From 46788f21f6c5b4bb301ae60f657b0b75d072aecd Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Fri, 12 Jun 2020 12:27:37 +0200
Subject: [PATCH] switch margin-bottom rules to padding-bottom now used in
 miniature

---
 .../app/videos/+video-watch/video-watch.component.scss    | 6 +++---
 .../recommendations/recommended-videos.component.html     | 8 +++++---
 .../recommendations/recommended-videos.component.scss     | 4 ++++
 3 files changed, 12 insertions(+), 6 deletions(-)

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 e0d41117a..2e083982e 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -122,7 +122,7 @@ $video-info-margin-left: 44px;
 
 .video-bottom {
   display: flex;
-  margin-top: 40px;
+  margin-top: 1.5rem;
 
   .video-info {
     flex-grow: 1;
@@ -418,7 +418,7 @@ $video-info-margin-left: 44px;
       display: flex;
       width: max-content;
       height: 100%;
-      margin-bottom: 20px;
+      padding-bottom: 20px;
       flex-wrap: wrap;
     }
 
@@ -552,7 +552,7 @@ my-video-comments {
 @media screen and (max-width: 600px) {
   .video-bottom {
     margin-top: 20px !important;
-    margin-bottom: 20px !important;
+    padding-bottom: 20px !important;
 
     .video-info {
       padding: 0;
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.html b/client/src/app/videos/recommendations/recommended-videos.component.html
index e4568c309..a40266028 100644
--- a/client/src/app/videos/recommendations/recommended-videos.component.html
+++ b/client/src/app/videos/recommendations/recommended-videos.component.html
@@ -12,11 +12,13 @@
       </div>
     </div>
 
-    <div *ngFor="let video of (videos$ | async); let i = index; let length = count">
-      <my-video-miniature [displayOptions]="displayOptions" [video]="video" [user]="user" (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()">
+    <ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count">
+      <my-video-miniature 
+        [displayOptions]="displayOptions" [video]="video" [user]="user"
+        (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()">
       </my-video-miniature>
       
       <hr *ngIf="!playlist && i == 0 && length > 1" />
-    </div>
+    </ng-container>
   </ng-container>
 </div>
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.scss b/client/src/app/videos/recommendations/recommended-videos.component.scss
index cde62f87f..b278c9654 100644
--- a/client/src/app/videos/recommendations/recommended-videos.component.scss
+++ b/client/src/app/videos/recommendations/recommended-videos.component.scss
@@ -25,3 +25,7 @@
     font-weight: 600;
   }
 }
+
+hr {
+  margin-top: 0;
+}
-- 
2.25.1