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

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 b0d49efa27616ed107b2544ded0d28ff217a2600..e9f4363786d5dfcd7094ebbca2b0b479d5435380 100644 (file)
--- 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 b10f8b0aba063d28afbb939b29e9c4fef11dec6d..aaf21126b429c41241aec50ff10c6620b2ad7ca5 100644 (file)
--- 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;
     }
   }