Fix overview page on mobile

2 files changed, 13 insertions, 9 deletions

diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html
index be9db3d90..4150cd5e1 100644
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -7,9 +7,7 @@
       <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
     </div>
 
-    <div>
-      <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
-    </div>
+    <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
   </div>
 
   <div class="section" *ngFor="let object of overview.tags">
@@ -17,9 +15,7 @@
       <a routerLink="/search" [queryParams]="{ tagOneOf: [ object.tag ] }">{{ object.tag }}</a>
     </div>
 
-    <div>
-      <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
-    </div>
+    <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
   </div>
 
   <div class="section channel" *ngFor="let object of overview.channels">
@@ -31,9 +27,7 @@
       </a>
     </div>
 
-    <div>
-      <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
-    </div>
+    <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
   </div>
 
 </div>
diff --git a/client/src/app/videos/video-list/video-overview.component.scss b/client/src/app/videos/video-list/video-overview.component.scss
index 73b6d2e53..e7dc60b4b 100644
--- a/client/src/app/videos/video-list/video-overview.component.scss
+++ b/client/src/app/videos/video-list/video-overview.component.scss
@@ -7,6 +7,10 @@
   &:first-child {
     padding-top: 30px;
   }
+
+  my-video-miniature {
+    text-align: left;
+  }
 }
 
 .section-title {
@@ -33,4 +37,10 @@
       margin-right: 10px;
     }
   }
+}
+
+@media screen and (max-width: 500px) {
+  .section {
+    @include video-miniature-small-screen;
+  }
 }
\ No newline at end of file