Add explicit step and aria-current attribute in register form

[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 641647e2eb17edabdc7803c7e423a73535f0e89e..6e59adb600d4890fb68861cb861567791eea05c7 100644 (file)
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -62,7 +62,7 @@
 
           display: flex;
           align-items: baseline;
-          color: var(--mainForegroundColor);
+          color: pvar(--mainForegroundColor);
           width: fit-content;
 
           .video-channel-display-name {
@@ -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: $video-thumbnail-width !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;
       }