[DURACOM-180] Prevent header from covering media viewer controls (base theme)

Author: davide-negretti

src/app/header-nav-wrapper/header-navbar-wrapper.component.html

@@ -1,4 +1,4 @@
-<div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
+<div [ngClass]="{'open': !(isNavBarCollapsed | async)}" id="header-navbar-wrapper">
     <ds-themed-header></ds-themed-header>
     <ds-themed-navbar></ds-themed-navbar>
 </div>

src/app/header-nav-wrapper/header-navbar-wrapper.component.scss

@@ -1,4 +1,6 @@
 :host {
   position: relative;
-  z-index: var(--ds-nav-z-index);
+  div#header-navbar-wrapper {
+    border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
+  }
 }

src/app/navbar/navbar.component.scss

@@ -1,6 +1,5 @@
 nav.navbar {
     background-color: var(--ds-navbar-bg);
-    border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
     align-items: baseline;
 }
 
@@ -12,9 +11,11 @@ nav.navbar {
         position: absolute;
         overflow: hidden;
         height: 0;
+        z-index: var(--ds-nav-z-index);
         &.open {
           height: auto;
           min-height: 100vh; //doesn't matter because wrapper is sticky
+          border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
         }
     }
 }