fix: learning header constant height

src/components/NavigationBar/CourseTabsNavigation.jsx

@@ -24,25 +24,23 @@ const CourseTabsNavigation = ({
   }, [courseId]);
 
   return (
-    <div id="courseTabsNavigation" className={classNames('course-tabs-navigation', className)}>
+    <div id="courseTabsNavigation" className={classNames('course-tabs-navigation px-4', className)}>
-      <div className="container-xl">
+      {!!tabs.length && (
-        {!!tabs.length && (
+        <Tabs
-          <Tabs
+          className="nav-underline-tabs"
-            className="nav-underline-tabs"
+          aria-label={intl.formatMessage(messages.courseMaterial)}
-            aria-label={intl.formatMessage(messages.courseMaterial)}
+        >
-          >
+          {tabs.map(({ url, title, slug }) => (
-            {tabs.map(({ url, title, slug }) => (
+            <a
-              <a
+              key={slug}
-                key={slug}
+              className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTab })}
-                className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTab })}
+              href={url}
-                href={url}
+            >
-              >
+              {title}
-                {title}
+            </a>
-              </a>
+          ))}
-            ))}
+        </Tabs>
-          </Tabs>
+      )}
-        )}
-      </div>
     </div>
   );
 };

src/index.scss

@@ -280,7 +280,6 @@ header {
   line-height: 28px;
   font-family: Inter, Helvetica Neue, Arial, sans-serif;
   font-size: 18px !important;
-  height: 60px !important;
 
   .user-dropdown {
     button {