Client: try to make it work with Android Firefox

4 files changed, 14 insertions, 7 deletions

diff --git a/client/src/app/videos/video-list/video-list.component.html b/client/src/app/videos/video-list/video-list.component.html
index e119517a8..2a753adba 100644
--- a/client/src/app/videos/video-list/video-list.component.html
+++ b/client/src/app/videos/video-list/video-list.component.html
@@ -1,10 +1,12 @@
-<div class="row videos-info">
-  <div class="col-md-9 videos-total-results">
+<div class="row col-md-12 videos-info">
+  <div class="col-md-9 col-xs-5 videos-total-results">
     <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span>
 
     <my-loader [loading]="loading | async"></my-loader>
   </div>
-  <my-video-sort class="col-md-3" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
+
+
+  <my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
 </div>
 
 <div class="videos-miniatures">
diff --git a/client/src/app/videos/video-list/video-list.component.scss b/client/src/app/videos/video-list/video-list.component.scss
index 1f491a6c3..fdff42c41 100644
--- a/client/src/app/videos/video-list/video-list.component.scss
+++ b/client/src/app/videos/video-list/video-list.component.scss
@@ -1,12 +1,12 @@
 .videos-info {
+  @media screen and (max-width: 400px) {
+    margin-left: 0;
+  }
 
-  padding-bottom: 20px;
   margin-bottom: 20px;
   border-bottom: 1px solid #f1f1f1;
   height: 40px;
   line-height: 40px;
-  width: 765px;
-  margin-left: 15px;
 
   my-video-sort {
     padding-right: 0;
diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html
index 373ff6bfb..0a0925dea 100644
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/video-miniature.component.html
@@ -1,4 +1,4 @@
-<div class="video-miniature col-md-4" (mouseenter)="onHover()" (mouseleave)="onBlur()">
+<div class="video-miniature col-md-4 col-sm-6 col-xs-6" (mouseenter)="onHover()" (mouseleave)="onBlur()">
   <a
     [routerLink]="['/videos/watch', video.id]" [attr.title]="video.description"
     class="video-miniature-thumbnail"
diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss
index 3a096dabd..6b3fa3bf0 100644
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/video-miniature.component.scss
@@ -1,9 +1,14 @@
 @import "../../../sass/pre-customizations.scss";
 
 .video-miniature {
+  @media screen and (max-width: 400px) {
+    padding: 0;
+  }
+
   margin-top: 30px;
   display: inline-block;
   position: relative;
+  min-width: 220px;
 
   .video-miniature-thumbnail {
     display: inline-block;