2 files changed, 22 insertions, 15 deletions

diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index 6d72e5765..967f3b188 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -1,8 +1,10 @@
 <div class="video-edit" [formGroup]="form">
-  <ngb-tabset class="root-tabset bootstrap">
+  <div ngbNav #nav="ngbNav" class="nav-tabs">
 
-    <ngb-tab i18n-title title="Basic info">
-      <ng-template ngbTabContent>
+    <ng-container ngbNavItem>
+      <a ngbNavLink i18n>Basic info</a>
+
+      <ng-template ngbNavContent>
         <div class="row">
           <div class="col-md-8">
             <div class="form-group">
@@ -155,10 +157,12 @@
           </div>
         </div>
       </ng-template>
-    </ngb-tab>
+    </ng-container>
+
+    <ng-container ngbNavItem>
+      <a ngbNavLink i18n>Captions</a>
 
-    <ngb-tab i18n-title title="Captions">
-      <ng-template ngbTabContent>
+      <ng-template ngbNavContent>
         <div class="captions">
 
           <div class="captions-header">
@@ -206,10 +210,12 @@
 
         </div>
       </ng-template>
-    </ngb-tab>
+    </ng-container>
+
+    <ng-container ngbNavItem>
+      <a ngbNavLink i18n>Advanced settings</a>
 
-    <ngb-tab i18n-title title="Advanced settings">
-      <ng-template ngbTabContent>
+      <ng-template ngbNavContent>
         <div class="row advanced-settings">
           <div class="col-md-12 col-xl-8">
 
@@ -262,10 +268,11 @@
           </div>
         </div>
       </ng-template>
-    </ngb-tab>
+    </ng-container>
 
-  </ngb-tabset>
+  </div>
 
+  <div [ngbNavOutlet]="nav"></div>
 </div>
 
 <my-video-caption-add-modal
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 144914731..90d26e13d 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -19,6 +19,10 @@ my-peertube-checkbox {
   margin-bottom: 1rem;
 }
 
+.nav-tabs {
+  margin-bottom: 15px;
+}
+
 .video-edit {
   height: 100%;
   min-height: 300px;
@@ -145,10 +149,6 @@ p-calendar {
 }
 
 ::ng-deep {
-  .root-tabset > .nav {
-    margin-bottom: 15px;
-  }
-
   .ng2-tag-input {
     border: none !important;
   }