8 files changed, 79 insertions, 87 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
index 0ab80e5a9..a17b13fdf 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
@@ -1,15 +1,15 @@
 <ng-container [formGroup]="form">
 
-  <div class="form-row mt-5"> <!-- cache grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-5"> <!-- cache grid -->
+
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">CACHE</div>
       <div i18n class="inner-form-description">
         Some files are not federated, and fetched when necessary. Define their caching policies.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-
+    <div class="col-12 col-lg-8 col-xl-9">
       <ng-container formGroupName="cache">
         <div class="form-group" formGroupName="previews">
           <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
@@ -57,8 +57,8 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- cache grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- cache grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div class="anchor" id="customizations"></div> <!-- customizations anchor -->
       <div i18n class="inner-form-title">CUSTOMIZATIONS</div>
       <div i18n class="inner-form-description">
@@ -66,8 +66,7 @@
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-
+    <div class="col-12 col-lg-8 col-xl-9">
       <ng-container formGroupName="instance">
         <ng-container formGroupName="customizations">
           <div class="form-group">
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index bae9d9775..f225c388d 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -1,13 +1,13 @@
 <ng-container [formGroup]="form">
-  <div class="form-row mt-5"> <!-- appearance grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-5"> <!-- appearance grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">APPEARANCE</div>
       <div i18n class="inner-form-description">
         Use <a routerLink="/admin/plugins">plugins & themes</a> for more involved changes, or <a routerLink="/admin/config/edit-custom" fragment="advanced-configuration">add slight customizations</a>.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="theme">
         <div class="form-group">
@@ -88,15 +88,15 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- broadcast grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- broadcast grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">BROADCAST MESSAGE</div>
       <div i18n class="inner-for-description">
         Display a message on your instance
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="broadcastMessage">
 
@@ -144,15 +144,15 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- new users grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- new users grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">NEW USERS</div>
       <div i18n class="inner-for-description">
         Manage <a routerLink="/admin/users">users</a> to set their quota individually.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="signup">
         <div class="form-group">
@@ -239,20 +239,20 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- videos grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- videos grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">VIDEOS</div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="import">
 
         <ng-container formGroupName="videos">
 
-          <div class="form-group mt-4">
+          <div class="form-group">
             <label i18n for="importConcurrency">Import jobs concurrency</label>
-            <span i18n class="muted ml-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
+            <span i18n class="muted ms-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
 
             <div class="number-with-unit">
               <input type="number" name="importConcurrency" formControlName="concurrency" />
@@ -309,12 +309,12 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- video channels grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- video channels grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">VIDEO CHANNELS</div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
       <div class="form-group" formGroupName="videoChannels">
         <label i18n for="videoChannelsMaxPerUser">Max video channels per user</label>
 
@@ -331,12 +331,12 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- search grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- search grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">SEARCH</div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="search">
         <ng-container formGroupName="remoteUri">
@@ -420,15 +420,15 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- federation grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- federation grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">FEDERATION</div>
       <div i18n class="inner-form-description">
         Manage <a routerLink="/admin/follows">relations</a> with other instances.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="followers">
         <ng-container formGroupName="instance">
@@ -499,12 +499,12 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- administrators grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- administrators grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">ADMINISTRATORS</div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <div class="form-group" formGroupName="admin">
         <label i18n for="adminEmail">Admin email</label>
@@ -527,8 +527,8 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- Twitter grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- Twitter grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">TWITTER</div>
       <div i18n class="inner-form-description">
         Provide the Twitter account representing your instance to improve link previews.
@@ -536,7 +536,7 @@
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="services">
         <ng-container formGroupName="twitter">
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 8fef39b79..cc8e699f3 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -1,4 +1,4 @@
-<h1 class="sr-only" i18n>Configuration</h1>
+<h1 class="visually-hidden" i18n>Configuration</h1>
 
 <div class="alert alert-warning" *ngIf="!isUpdateAllowed()" i18n>
   Updating instance configuration from the web interface is disabled by the system administrator.
@@ -64,7 +64,7 @@
 
   <div [ngbNavOutlet]="nav"></div>
 
-  <div class="form-row mt-4"> <!-- submit placement block -->
+  <div class="row mt-4"> <!-- submit placement block -->
     <div class="col-md-7 col-xl-5"></div>
     <div class="col-md-5 col-xl-5">
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index 0458d257f..31dd9f54f 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -102,11 +102,6 @@ input[disabled] {
   opacity: 0.5;
 }
 
-
-.form-group-right {
-  padding-top: 2px;
-}
-
 ngb-tabset:not(.previews) ::ng-deep {
   .nav-link {
     font-size: 105%;
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
index 2286a5a1a..701c3c0c1 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
@@ -2,12 +2,12 @@
 
   <ng-container formGroupName="instanceCustomHomepage">
 
-    <div class="form-row mt-5"> <!-- homepage grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-5"> <!-- homepage grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">INSTANCE HOMEPAGE</div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+      <div class="col-12 col-lg-8 col-xl-9">
 
         <div class="form-group">
           <label i18n for="instanceCustomHomepageContent">Homepage</label>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
index d806616bd..1c567d962 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
@@ -2,13 +2,12 @@
 
   <ng-container formGroupName="instance">
 
-    <div class="form-row mt-5"> <!-- instance grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-5"> <!-- instance grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">INSTANCE</div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-
+      <div class="col-12 col-lg-8 col-xl-9">
         <div class="form-group">
           <label i18n for="instanceName">Name</label>
 
@@ -77,16 +76,15 @@
       </div>
     </div>
 
-    <div class="form-row mt-4"> <!-- moderation & nsfw grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-4"> <!-- moderation & nsfw grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">MODERATION & NSFW</div>
-        <div i18n class="inner-for-description">
+        <div i18row="inner-for-description">
           Manage <a routerLink="/admin/users">users</a> to build a moderation team.
         </div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-
+      <div class="col-12 col-lg-8 col-xl-9">
         <div class="form-group">
           <my-peertube-checkbox inputName="instanceIsNSFW" formControlName="isNSFW">
             <ng-template ptTemplate="label">
@@ -162,12 +160,12 @@
       </div>
     </div>
 
-    <div class="form-row mt-4"> <!-- you and your instance grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-4"> <!-- you and your instance grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">YOU AND YOUR INSTANCE</div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+      <div class="col-12 col-lg-8 col-xl-9">
 
         <div class="form-group">
           <label i18n for="instanceAdministrator">Who is behind the instance?</label><my-help helpType="markdownText"></my-help>
@@ -220,12 +218,12 @@
       </div>
     </div>
 
-    <div class="form-row mt-4"> <!-- other information grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-4"> <!-- other information grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">OTHER INFORMATION</div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+      <div class="col-12 col-lg-8 col-xl-9">
 
         <div class="form-group">
           <label i18n for="instanceHardwareInformation">What server/hardware does the instance run on?</label>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
index 71d5d91f0..a970f3df3 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
@@ -1,14 +1,14 @@
 <ng-container [formGroup]="form">
 
-  <div class="form-row mt-5">
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-5">
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">LIVE</div>
       <div i18n class="inner-form-description">
         Enable users of your instance to stream live.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="live">
 
@@ -89,15 +89,15 @@
     </div>
   </div>
 
-  <div class="form-row"> <!-- transcoding live streams grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row"> <!-- transcoding live streams grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">TRANSCODING</div>
       <div i18n class="inner-form-description">
         Same as VOD transcoding, transcoding live streams so that they are in a streamable form that any device can play. Requires a beefy CPU, and then some.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="live">
         <ng-container formGroupName="transcoding">
@@ -115,7 +115,7 @@
           <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
             <label i18n for="liveTranscodingThreads">Live resolutions to generate</label>
 
-            <div class="ml-2 mt-2 d-flex flex-column">
+            <div class="ms-2 mt-2 d-flex flex-column">
               <ng-container formGroupName="resolutions">
 
                 <div class="form-group" *ngFor="let resolution of liveResolutions">
@@ -136,7 +136,7 @@
           <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
             <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
 
-            <span class="muted ml-1">
+            <span class="muted ms-1">
               <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
                 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding
               </ng-container>
@@ -157,7 +157,7 @@
 
           <div class="form-group mt-4" [ngClass]="getDisabledLiveTranscodingClass()">
             <label i18n for="liveTranscodingProfile">Live transcoding profile</label>
-            <span class="muted ml-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
+            <span class="muted ms-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
 
             <my-select-options
               id="liveTranscodingProfile"
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
index 5c0bea4a5..3d8ab094f 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
@@ -1,8 +1,8 @@
 <ng-container [formGroup]="form">
 
-  <div class="form-row mt-4"> <!-- transcoding grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3"></div>
-    <div class="form-group form-group-right col-12 col-lg-8">
+  <div class="row mt-4"> <!-- transcoding grid -->
+    <div class="col-12 col-lg-4 col-xl-3"></div>
+    <div class="col-12 col-lg-8">
 
       <div class="callout callout-info">
         <span i18n>
@@ -21,8 +21,8 @@
     </div>
   </div>
 
-  <div class="form-row mt-2"> <!-- transcoding grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- transcoding grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">TRANSCODING</div>
       <div i18n class="inner-form-description">
         Process uploaded videos so that they are in a streamable form that any device can play. Though costly in
@@ -30,11 +30,11 @@
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="transcoding">
 
-        <div class="form-group mb-0 col-12 col-xl-11">
+        <div class="col-12 col-xl-11">
           <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled" [recommended]="true">
             <ng-template ptTemplate="label">
               <ng-container i18n>Transcoding enabled</ng-container>
@@ -115,7 +115,7 @@
                 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
                   <label i18n>Resolutions to generate per enabled format</label>
 
-                  <div class="ml-2 mt-2 d-flex flex-column">
+                  <div class="ms-2 mt-2 d-flex flex-column">
                     <ng-container formGroupName="resolutions">
                       <div class="form-group" *ngFor="let resolution of resolutions">
                         <my-peertube-checkbox
@@ -142,7 +142,7 @@
 
         <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
           <label i18n for="transcodingThreads">Transcoding threads</label>
-          <span class="muted ml-1">
+          <span class="muted ms-1">
             <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
               will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding
             </ng-container>
@@ -162,9 +162,9 @@
           <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
         </div>
 
-        <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
+        <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
           <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
-          <span class="muted ml-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
+          <span class="muted ms-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
 
           <div class="number-with-unit">
             <input type="number" name="transcodingConcurrency" formControlName="concurrency" />
@@ -174,9 +174,9 @@
           <div *ngIf="formErrors.transcoding.concurrency" class="form-error">{{ formErrors.transcoding.concurrency }}</div>
         </div>
 
-        <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
+        <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
           <label i18n for="transcodingProfile">Transcoding profile</label>
-          <span class="muted ml-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
+          <span class="muted ms-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
 
           <my-select-options
             id="transcodingProfile"
@@ -193,15 +193,15 @@
     </div>
   </div>
 
-  <div class="form-row mt-2"> <!-- video studio grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-2"> <!-- video studio grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">VIDEO STUDIO</div>
       <div i18n class="inner-form-description">
         Allows your users to edit their video (cut, add intro/outro, add a watermark etc)
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="videoStudio">
         <div class="form-group" [ngClass]="getTranscodingDisabledClass()">