Fix z-index with custom homepage

client/e2e/src/po/video-upload.po.ts

@@ -3,7 +3,7 @@ import { getCheckbox, selectCustomSelect } from '../utils'
 
 export class VideoUploadPage {
   async navigateTo () {
-    const publishButton = await $('.header .publish-button')
+    const publishButton = await $('.root-header .publish-button')
 
     await publishButton.waitForClickable()
     await publishButton.click()

client/src/app/app.component.html

@@ -3,7 +3,7 @@
 <my-hotkeys-cheatsheet></my-hotkeys-cheatsheet>
 
 <div class="peertube-container" [ngClass]="{ 'user-logged-in': isUserLoggedIn(), 'user-not-logged-in': !isUserLoggedIn() }">
-  <div class="header">
+  <div class="root-header">
 
     <div class="top-left-block">
       <span class="icon icon-menu" role="button" [title]="getToggleTitle()" (click)="menu.toggleMenu()"></span>
@@ -14,7 +14,7 @@
       </a>
     </div>
 
-    <div class="header-right">
+    <div class="root-header-right">
       <my-header class="w-100 d-flex justify-content-end"></my-header>
     </div>
   </div>

client/src/app/app.component.scss

@@ -15,7 +15,7 @@
   width: 100%;
 }
 
-.header {
+.root-header {
   height: $header-height;
   position: fixed;
   top: 0;
@@ -49,7 +49,7 @@
   }
 }
 
-.header-right {
+.root-header-right {
   height: $header-height;
   display: flex;
   align-items: center;

client/src/app/shared/shared-forms/markdown-textarea.component.scss

@@ -80,7 +80,7 @@ $input-border-radius: 3px;
   }
 
   &.maximized {
-    z-index: #{z(header) - 1};
+    z-index: #{z(root-header) - 1};
     position: fixed;
     top: $header-height;
     left: $menu-width;

client/src/sass/include/_variables.scss

@@ -176,7 +176,7 @@ $zindex: (
   tooltip         : 14000,
   loadbar         : 15000,
   privacymsg      : 17500,
-  header          : 17500,
+  root-header     : 17500,
   help-popover    : 17600,
   dropdown        : 17600,
   modal           : 19000,

client/src/sass/z-index.scss

@@ -1,8 +1,8 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.header {
-  z-index: z(header);
+.root-header {
+  z-index: z(root-header);
 }
 
 .help-popover {
@@ -10,7 +10,7 @@
 }
 
 ngx-loading-bar {
-  z-index: z(header) + 1 !important;
+  z-index: z(root-header) + 1 !important;
 }
 
 // Dropdown added to body, override default z-index