Align search field with checkboxes in playlist add

3 files changed, 9 insertions, 19 deletions

diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
index 5f9bb51a7..f1b6cd601 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
@@ -1,10 +1,14 @@
 @import '_variables';
 @import '_mixins';
 
-.header {
-  min-width: 240px;
+.header,
+.dropdown-item,
+.input-container {
   padding: 6px 24px 10px 24px;
+}
 
+.header {
+  min-width: 240px;
   margin-bottom: 10px;
   border-bottom: 1px solid $separator-border-color;
 
@@ -44,24 +48,11 @@
   }
 }
 
-.dropdown-item {
-  padding: 6px 24px;
-}
-
 .playlists {
   max-height: 180px;
   overflow-y: auto;
 }
 
-.input-container {
-  display: flex;
-
-  input {
-    flex-grow: 1;
-    margin: 0 15px 10px 15px;
-  }
-}
-
 .playlist {
   display: flex;
   cursor: pointer;
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
index e60a8381d..0c593a79a 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'
-import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
+import { CachedPlaylist, VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
 import { AuthService, Notifier } from '@app/core'
 import { Subject, Subscription } from 'rxjs'
 import { debounceTime, filter } from 'rxjs/operators'
@@ -7,7 +7,6 @@ import { Video, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPr
 import { FormReactive, FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/forms'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { secondsToTime } from '../../../assets/player/utils'
-import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
 import * as debug from 'debug'
 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 import { VideoExistInPlaylist } from '@shared/models/videos/playlist/video-exist-in-playlist.model'
@@ -50,7 +49,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
   private disabled = false
 
   private listenToPlaylistChangeSub: Subscription
-  private playlistsData: VideoPlaylist[] = []
+  private playlistsData: CachedPlaylist[] = []
 
   constructor (
     protected formValidatorService: FormValidatorService,
diff --git a/client/src/app/shared/video-playlist/video-playlist.service.ts b/client/src/app/shared/video-playlist/video-playlist.service.ts
index c5b87fc11..7eddf81e1 100644
--- a/client/src/app/shared/video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/video-playlist/video-playlist.service.ts
@@ -26,7 +26,7 @@ import * as debug from 'debug'
 
 const logger = debug('peertube:playlists:VideoPlaylistService')
 
-type CachedPlaylist = VideoPlaylist | { id: number, displayName: string }
+export type CachedPlaylist = VideoPlaylist | { id: number, displayName: string }
 
 @Injectable()
 export class VideoPlaylistService {