Fix z-index with custom homepage

6 files changed, 10 insertions, 10 deletions

diff --git a/client/e2e/src/po/video-upload.po.ts b/client/e2e/src/po/video-upload.po.ts
index 38395ea2f..8605139c9 100644
--- a/client/e2e/src/po/video-upload.po.ts
+++ b/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()
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 629c04e6b..6a833b039 100644
--- a/client/src/app/app.component.html
+++ b/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>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 31e9987c6..229a99a2d 100644
--- a/client/src/app/app.component.scss
+++ b/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;
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index bbb266448..f4b74a2d4 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/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;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 225cad9c2..c02359f28 100644
--- a/client/src/sass/include/_variables.scss
+++ b/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,
diff --git a/client/src/sass/z-index.scss b/client/src/sass/z-index.scss
index d362af0dd..f8b0e1cc0 100644
--- a/client/src/sass/z-index.scss
+++ b/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