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

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;
     }
   }