From 49efc4175d66f7345865a43c97860758a387278f Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Mon, 26 Feb 2024 18:23:51 +0100
Subject: [PATCH] [DURACOM-195] fix issue with logo on small screens

(cherry picked from commit bff93a08471240e107704cd7c525ac747b0c93b6)
---
 src/themes/dspace/app/header/header.component.html |  4 ++--
 src/themes/dspace/app/header/header.component.scss | 11 ++++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
index 1ea91bc460..0a0e055253 100644
--- a/src/themes/dspace/app/header/header.component.html
+++ b/src/themes/dspace/app/header/header.component.html
@@ -1,5 +1,5 @@
 <header id="main-site-header">
-  <div class="container h-100 d-flex flex-row flex-nowrap justify-content-between gapx-3">
+  <div class="container h-100 d-flex flex-row flex-wrap align-items-center justify-content-between gapx-3 gapy-2" id="main-site-header-container">
     <!-- Logo and navbar wrapper -->
     <div id="header-left"
          [attr.role]="(isMobile$ | async) ? 'navigation' : 'presentation'"
@@ -13,7 +13,7 @@
       </nav>
     </div>
     <!-- Search bar and other menus -->
-    <div id="header-right" class="h-100 d-flex flex-row flex-nowrap justify-content-end align-items-center gapx-1">
+    <div id="header-right" class="h-100 d-flex flex-row flex-nowrap justify-content-end align-items-center gapx-1 ml-auto">
       <ds-themed-search-navbar></ds-themed-search-navbar>
       <div role="menubar" class="h-100 d-flex flex-row flex-nowrap align-items-center gapx-1">
         <ds-themed-lang-switch></ds-themed-lang-switch>
diff --git a/src/themes/dspace/app/header/header.component.scss b/src/themes/dspace/app/header/header.component.scss
index f61c442ff5..5aae8af017 100644
--- a/src/themes/dspace/app/header/header.component.scss
+++ b/src/themes/dspace/app/header/header.component.scss
@@ -1,7 +1,16 @@
 :host {
   #main-site-header {
-    height: var(--ds-header-height);
+    min-height: var(--ds-header-height);
+
+    @include media-breakpoint-up(md) {
+      height: var(--ds-header-height);
+    }
+
     background-color: var(--ds-header-bg);
+
+    &-container {
+      min-height: var(--ds-header-height);
+    }
   }
 
   img#header-logo {