fix: learning header constant height (#551)

src/components/NavigationBar/CourseTabsNavigation.jsx

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