From 8a3183e50dab38ea79b9557840dce546aa1958ca Mon Sep 17 00:00:00 2001
From: Kim <1877318+kimsible@users.noreply.github.com>
Date: Mon, 11 May 2020 11:16:21 +0200
Subject: Fix non-fixed header and menu when overflow-x body on touchscreens
 (#2711)

* Make my-account-videos responsive on small screens

* Make my-account-channels responsive for small screens

* Make search result responsive on small screen

Co-authored-by: kimsible <kimsible@users.noreply.github.com>
---
 client/src/app/search/search.component.scss | 44 ++++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

(limited to '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 641647e2e..78749cf20 100644
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -81,6 +81,48 @@
   }
 }
 
+@media screen and (min-width: $small-view) and (max-width: breakpoint(xl)) {
+  .video-channel-info .video-channel-names {
+    flex-direction: column !important;
+
+    .video-channel-name {
+      @include ellipsis; // Ellipsis and max-width on channel-name to not break screen
+
+      max-width: 250px;
+      margin-left: 0 !important;
+    }
+  }
+
+  :host-context(.main-col:not(.expanded)) {
+    // Override the min-width: 500px to not break screen
+    ::ng-deep .video-miniature-information {
+      min-width: 300px !important;
+    }
+  }
+}
+
+@media screen and (min-width: $small-view) and (max-width: breakpoint(lg)) {
+  :host-context(.main-col:not(.expanded)) {
+    .video-channel-info .video-channel-names {
+      .video-channel-name {
+        max-width: 160px;
+      }
+    }
+
+    // Override the min-width: 500px to not break screen
+    ::ng-deep .video-miniature-information {
+      min-width: 223px !important;
+    }
+  }
+
+  :host-context(.expanded) {
+    // Override the min-width: 500px to not break screen
+    ::ng-deep .video-miniature-information {
+      min-width: 300px !important;
+    }
+  }
+}
+
 @media screen and (max-width: $small-view) {
   .search-result {
     .entry.video-channel,
@@ -90,7 +132,7 @@
       justify-content: center;
       align-items: center;
       text-align: center;
-      
+
       img {
         margin: 0;
       }
-- 
cgit v1.2.3