Fix channels search on mobile

[github/Chocobozzz/PeerTube.git] / client / src / app / search / search.component.scss

diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index 67b2094b03b3666c442a46fbbae0619aec1fb43d..3e074621b8545a403f9c7a419812d0d529afc2af 100644 (file)
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -132,39 +132,61 @@
   }
 }
 
-@media screen and (max-width: 800px) {
-  .search-result {
-    padding: 20px 10px;
-  }
+@media screen and (max-width: $small-view) {
+  .video-channel-names {
+    flex-direction: column !important;
 
-  .results-header {
-    font-size: 15px !important;
+    .video-channel-name {
+      margin-left: 0 !important;
+    }
   }
+}
 
-  .entry {
-    flex-direction: column;
-    height: auto;
-    text-align: center;
+@media screen and (max-width: $mobile-view) {
+  .search-result {
+    padding: 20px 10px;
 
-    &.video {
-      .video-info-name,
-      .video-info-account {
-        margin: auto;
-      }
+    .results-header {
+      font-size: 15px !important;
+    }
 
-      my-video-thumbnail {
-        margin-right: 0 !important;
+    .entry {
+      flex-direction: column;
+      height: auto;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+
+      &.video {
+        .video-info-name,
+        .video-info-account {
+          margin: auto;
+        }
 
-        /deep/ .video-thumbnail {
-          width: 100%;
-          height: auto;
+        my-video-thumbnail {
+          margin-right: 0 !important;
 
-          img {
+          /deep/ .video-thumbnail {
             width: 100%;
             height: auto;
+
+            img {
+              width: 100%;
+              height: auto;
+            }
           }
         }
       }
+
+      &.video-channel {
+        .video-channel-info .video-channel-names {
+          align-items: center;
+        }
+
+        my-subscribe-button {
+          margin-top: 5px;
+        }
+      }
     }
   }
 }