fix: fix project page nav in small viewports (#3169)

Fixes #3168.
SwissDataScienceCenter · May 31, 2024 · b606ce5 · b606ce5
1 parent 6d90c0b
commit b606ce5
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 15 deletions.
diff --git a/client/src/features/ProjectPageV2/ProjectPageContainer/ProjectPageContainer.tsx b/client/src/features/ProjectPageV2/ProjectPageContainer/ProjectPageContainer.tsx
@@ -75,19 +75,13 @@ function ProjectPageContainerInner({
       >
         <ProjectPageHeader project={data} />
       </Col>
-      <Col sm={12} lg={1} className={cx(styles.NavContainer)}>
-        <div className="sticky-top pt-2 pt-md-4">
-          <ProjectPageNav
-            project={data}
-            selectedContent={contentPage}
-          ></ProjectPageNav>
+      <Col sm={12} lg={1} className={styles.NavContainer}>
+        <div className={cx("sticky-lg-top", "z-1", "pt-2", "pt-md-4")}>
+          <ProjectPageNav project={data} selectedContent={contentPage} />
         </div>
       </Col>
       <Col sm={12} lg={11}>
-        <ProjectPageContent
-          project={data}
-          selectedContent={contentPage}
-        ></ProjectPageContent>
+        <ProjectPageContent project={data} selectedContent={contentPage} />
       </Col>
     </Row>
   );

diff --git a/client/src/features/ProjectPageV2/ProjectPageNav/ProjectPageNav.tsx b/client/src/features/ProjectPageV2/ProjectPageNav/ProjectPageNav.tsx
@@ -107,11 +107,7 @@ export default function ProjectPageNav({
             end
             to={projectSettingsUrl}
             title="Settings"
-            className={cx(
-              navLinkClasses,
-              selectedContent === ProjectPageContentType.Settings && "active",
-              styles.navLink
-            )}
+            className={cx(navLinkClasses, styles.navLink)}
           >
             <PencilSquare
               className={cx("d-block", "d-lg-none", "rk-icon-md")}