fix: organization logo display

* fix: platform logo on mobile display
* fix: hide course name on mobile

src/index.scss

@@ -42,7 +42,7 @@ $white: #fff;
   .user-dropdown {
     .btn {
       height: 3rem;
-      @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+      @media (map-get($grid-breakpoints, "sm")) {
         padding: 0 0.5rem;
       }
     }

src/learning-header/LearningHeader.jsx

@@ -9,6 +9,8 @@ import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 import messages from './messages';
 import getCourseLogoOrg from './data/api';
 
+import './_header.scss';
+
 function LinkedLogo({
   href,
   src,
@@ -28,6 +30,9 @@ LinkedLogo.propTypes = {
   alt: PropTypes.string.isRequired,
 };
 
+// this feature flag is not included on the frontend-platform, we have to get it directly from ENV
+const enabledOrgLogo = process.env.ENABLED_ORG_LOGO || true;
+
 function LearningHeader({
   courseOrg, courseTitle, intl, showUserDropdown,
 }) {
@@ -54,17 +59,19 @@ function LearningHeader({
       <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
       <div className="container-xl py-2 d-flex align-items-center">
         {headerLogo}
-        <div className="flex-grow-1 course-title-lockup text-center" style={{ lineHeight: 1 }}>
-          {
+        <div className="d-none d-md-block flex-grow-1 course-title-lockup">
+          <div className={`d-md-flex ${enabledOrgLogo && 'align-items-center justify-content-center'} w-100`}>
+          {enabledOrgLogo ? (
             (courseOrg && logoOrg)
-            && <img src={logoOrg} alt={`${courseOrg} logo`} style={{ maxHeight: '50px' }} />
-          }
+            && <img src={logoOrg} alt={`${courseOrg} logo`} style={{ maxHeight: '45px' }} />
+          ) : null}
           <span
-            className="d-inline-block course-title font-weight-bold ml-3 overflow-hidden text-nowrap text-left w-25"
-            style={{ textOverflow: 'ellipsis' }}
+            className="d-inline-block course-title font-weight-semibold ml-3 text-truncate text-left w-25"
+            style={{ fontSize: '0.85rem' }}
           >
             {courseTitle}
           </span>
+          </div>
         </div>
         {showUserDropdown && authenticatedUser && (
           <AuthenticatedUserDropdown

src/learning-header/_header.scss

@@ -0,0 +1,10 @@
+@import "../../node_modules/bootstrap/scss/bootstrap-grid";
+@import "../../node_modules/bootstrap/scss/mixins/breakpoints";
+
+.logo {
+    img {
+        @include media-breakpoint-down(sm) {
+            max-width: 85% !important;
+        }
+    }
+}