From 9a8c02c9da7b538b3d726016c59a527fa3811ab0 Mon Sep 17 00:00:00 2001
From: aschaap <8865084+aschaap@users.noreply.github.com>
Date: Thu, 8 Apr 2021 04:44:43 -0400
Subject: [PATCH] correct inconsistency in spacing "Sort By" for narrow screens
 (#3938)

Mimicked the approach used in other tabs under "My Library":
* Adding bottom margin to search field to keep distance from "Sort By"
* Fixing extra left margin on "Sort By" for narrow screens
* Removed the `ml-2` class so that `!important` is no longer needed
* Removed unnecessary `!important` from account video search field width
---
 .../src/app/+my-library/my-videos/my-videos.component.html | 2 +-
 .../src/app/+my-library/my-videos/my-videos.component.scss | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html
index b0d49efa2..e9f436378 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.html
+++ b/client/src/app/+my-library/my-videos/my-videos.component.html
@@ -26,7 +26,7 @@
     <span class="sr-only" i18n>Clear filters</span>
   </div>
 
-  <div class="peertube-select-container peertube-select-button ml-2">
+  <div class="peertube-select-container peertube-select-button">
     <select [(ngModel)]="sort" (ngModelChange)="onChangeSortColumn()" class="form-control">
       <option value="undefined" disabled>Sort by</option>
       <option value="-publishedAt" i18n>Last published first</option>
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss
index b10f8b0ab..aaf21126b 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.scss
+++ b/client/src/app/+my-library/my-videos/my-videos.component.scss
@@ -7,6 +7,7 @@ input[type=text] {
 
 .peertube-select-container {
   @include peertube-select-container(auto);
+  margin-left: 0.5rem;
 }
 
 h1 {
@@ -67,7 +68,11 @@ my-edit-button {
     flex-direction: column;
 
     input[type=text] {
-      width: 100% !important;
+      width: 100%;
+      margin-bottom: 12px;
+    }
+    .peertube-select-container {
+      margin-left: 0;
     }
   }