Refactor Organized Content nav styling

components/OrganizedContent.module.css

@@ -21,14 +21,17 @@
   margin-bottom: calc(16rem / 16);
 }
 
-.nav {
+.navWrapper {
   top: calc(20rem / 16);
   bottom: calc(60rem / 16);
   position: sticky;
-  height: calc(94vh - (20rem / 16));
-  flex-shrink: 0;
   overflow: auto;
+  height: calc(94vh - (20rem / 16));
   margin: calc(8rem / 16) calc(32rem / 16) calc(20rem / 16) 0;
+  flex-shrink: 0;
+}
+
+.nav {
   color: var(--primary-heading);
   font-weight: 500;
 }

components/OrganizedContent.tsx

@@ -134,41 +134,43 @@ function Nav({
     : [styles.nav];
 
   return (
-    <nav
-      className={navStyles.join(" ")}
-      onClick={(event) => event.stopPropagation()}
-    >
-      <h1 className={styles.mobileNavTitle}>{pageTitle}</h1>
-      {sections.map((section, index) => {
-        const classNames = [styles.navItem];
+    <div className={styles.navWrapper}>
+      <nav
+        className={navStyles.join(" ")}
+        onClick={(event) => event.stopPropagation()}
+      >
+        <h1 className={styles.mobileNavTitle}>{pageTitle}</h1>
+        {sections.map((section, index) => {
+          const classNames = [styles.navItem];
 
-        if (index === currentIndex) {
-          classNames.push(styles.selected);
-        }
+          if (index === currentIndex) {
+            classNames.push(styles.selected);
+          }
 
-        if (section.id === READ_ALL_ID) {
-          classNames.push(styles.readAll);
-        }
+          if (section.id === READ_ALL_ID) {
+            classNames.push(styles.readAll);
+          }
 
-        return (
-          <div
-            onClick={() => {
-              setMobileNavOpen(false);
-            }}
-            key={section.id}
-          >
-            <Link className={classNames.join(" ")} id={section.id}>
-              <span className={styles.marker} />
-              <div>
-                {numberedSections && section.id !== READ_ALL_ID
-                  ? `${index}. ${section.title}`
-                  : section.title}
-              </div>
-            </Link>
-          </div>
-        );
-      })}
-    </nav>
+          return (
+            <div
+              onClick={() => {
+                setMobileNavOpen(false);
+              }}
+              key={section.id}
+            >
+              <Link className={classNames.join(" ")} id={section.id}>
+                <span className={styles.marker} />
+                <div>
+                  {numberedSections && section.id !== READ_ALL_ID
+                    ? `${index}. ${section.title}`
+                    : section.title}
+                </div>
+              </Link>
+            </div>
+          );
+        })}
+      </nav>
+    </div>
   );
 }