From b61b18dcfccf133faedb35470add8c478892120c Mon Sep 17 00:00:00 2001
From: Ivo Branco <ivo.branco@fccn.pt>
Date: Thu, 12 Dec 2024 00:13:12 +0000
Subject: [PATCH] feat: review header

Add max width for org logos, there are logos too wide.
Increase course name to full width, it hides if not has available space.
Show language select compacted version on 1200 width.
---
 src/learning-header/LearningHeader.jsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx
index 0ffb3382e..b5e561c04 100644
--- a/src/learning-header/LearningHeader.jsx
+++ b/src/learning-header/LearningHeader.jsx
@@ -68,13 +68,12 @@ const LearningHeader = ({
         {headerLogo}
         <div className="d-none d-md-block flex-grow-1 course-title-lockup">
           <div className={`d-md-flex ${enableOrgLogo && 'align-items-center justify-content-center'} w-100`}>
-            {enableOrgLogo ? (
-              (courseOrg && logoOrg)
-              && <img src={logoOrg} alt={`${courseOrg} logo`} style={{ maxHeight: '45px' }} />
-            ) : null}
+            {enableOrgLogo && courseOrg && logoOrg && (
+              <img src={logoOrg} alt={`${courseOrg} logo`} style={{ maxHeight: '3rem', maxWidth: '15rem' }} />
+            )}
             <span
-              className="d-inline-block course-title font-weight-semibold ml-3 text-truncate text-left w-25"
-              style={{ fontSize: '0.85rem' }}
+              className="d-inline-block course-title font-weight-semibold ml-3 text-truncate text-left"
+              style={{ fontSize: '1rem' }}
             >
               {courseTitle}
             </span>
@@ -82,14 +81,14 @@ const LearningHeader = ({
         </div>
         {getConfig().ENABLE_HEADER_LANG_SELECTOR && (
           <div className="mx-2 d-md-inline-flex">
-            <Responsive maxWidth={1000}>
+            <Responsive maxWidth={1200}>
               <LanguageSelector
                 options={JSON.parse(getConfig().SITE_SUPPORTED_LANGUAGES)}
                 compact
                 authenticatedUser={authenticatedUser}
               />
             </Responsive>
-            <Responsive minWidth={1000}>
+            <Responsive minWidth={1200}>
               <LanguageSelector
                 options={JSON.parse(getConfig().SITE_SUPPORTED_LANGUAGES)}
                 compact={false}