Center search fields (my videos/playlists)

4 files changed, 9 insertions, 8 deletions

diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
index 49bf834c4..dd6a0e55b 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html
@@ -1,8 +1,6 @@
-<div>
+<div class="video-playlists-header">
   <h4 i18n>Playlists <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h4>
-</div>
 
-<div class="video-playlists-header">
   <input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" />
 
   <a class="create-button" routerLink="create">
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
index 4fb4ed4be..4e4156b22 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
@@ -36,7 +36,6 @@
 .video-playlists-header {
   display: flex;
   justify-content: space-between;
-  text-align: right;
   margin: 20px 0 50px;
 
   input[type=text] {
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index 7479c84f9..b07b9c1a6 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -1,9 +1,9 @@
-<div>
+<div class="videos-header">
   <h4 i18n>Videos <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h4>
-</div>
 
-<div class="videos-header">
   <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch" (ngModelChange)="onVideosSearchChanged()" />
+
+  <div class="fake-element"></div>
 </div>
 
 <my-videos-selection
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index f798c50b5..8248cc94f 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -4,9 +4,13 @@
 .videos-header {
   display: flex;
   justify-content: space-between;
-  text-align: right;
   margin: 20px 0 50px;
 
+  h4,
+  .fake-element {
+    flex: 1;
+  }
+
   input[type=text] {
     @include peertube-input-text(300px);
   }