From c6ade09e4a8cd050c701f2684aa35522695a1d5c Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Thu, 9 Nov 2023 15:24:22 +0100
Subject: [PATCH] [DURACOM-180] Prevent header from covering media viewer
 controls (base theme)

(cherry picked from commit c042cd8d1154af59310b162c9a97e7d3820a1592)
---
 .../header-nav-wrapper/header-navbar-wrapper.component.html   | 2 +-
 .../header-nav-wrapper/header-navbar-wrapper.component.scss   | 4 +++-
 src/app/navbar/navbar.component.scss                          | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
index f99070b738f..5756ad32b0b 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
+++ b/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>
diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index b02b3c378ce..c1bc9c7e909 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/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;
+  }
 }
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index 42e72aaffd8..dac8c0927f3 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/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
         }
     }
 }