Use ng-select for jobs list

client/src/app/+admin/system/jobs/jobs.component.html

@@ -1,17 +1,23 @@
 <div class="admin-sub-header">
   <div class="select-filter-block">
     <label for="jobType" i18n>Job type</label>
-    <div class="peertube-select-container">
+
-      <select id="jobType" name="jobType" [(ngModel)]="jobType" (ngModelChange)="onJobStateOrTypeChanged()" class="form-control">
+    <ng-select
-        <option *ngFor="let jobType of jobTypes" [value]="jobType">{{ jobType }}</option>
+      class="select-job-type"
-      </select>
+      labelForId="jobType"
-    </div>
+      [(ngModel)]="jobType" (ngModelChange)="onJobStateOrTypeChanged()"
+      [searchable]="true"
+      [clearable]="false"
+    >
+      <ng-option *ngFor="let jobType of jobTypes" [value]="jobType">{{ jobType }}</ng-option>
+    </ng-select>
   </div>
 
   <div class="select-filter-block">
     <label for="jobState" i18n>Job state</label>
     <ng-select
       class="select-job-state"
+      labelForId="jobState"
       [(ngModel)]="jobState"
       (ngModelChange)="onJobStateOrTypeChanged()"
       [clearable]="false"

client/src/app/+admin/system/jobs/jobs.component.scss

@@ -5,6 +5,16 @@
   min-width: 120px;
 }
 
+.select-job-type {
+  min-width: 240px;
+
+  ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items {
+    @media screen and (min-height: 500px) {
+      max-height: calc(90vh - 250px);
+    }
+  }
+}
+
 @media screen and (min-width: $primeng-breakpoint) {
   .job-id {
     max-width: 30vw !important;