fix: scroll and archive artifacts

Author: canerakdas

apps/site/components/Downloads/MinorReleasesTable/index.module.css

@@ -10,16 +10,26 @@
 .scrollable {
   @apply scrollbar-thin
     flex
-    snap-x
+    max-h-[21rem]
+    snap-y
     snap-mandatory
-    overflow-x-auto;
+    overflow-y-auto;
 
-  > table {
-    @apply shrink-0
-      snap-start;
+  thead {
+    @apply rounded-t-xs
+      sticky
+      top-px
+      bg-white
+      shadow-[0_-1px_0_0_var(--color-neutral-200)]
+      dark:bg-neutral-950
+      dark:shadow-[0_-1px_0_0_var(--color-neutral-800)];
+  }
+
+  thead th {
+    @apply last:md:w-56;
+  }
 
-    thead th {
-      @apply last:md:w-56;
-    }
+  tr {
+    @apply snap-start;
   }
 }

apps/site/components/Downloads/MinorReleasesTable/index.tsx

@@ -7,7 +7,6 @@ import type { FC } from 'react';
 import Link from '#site/components/Link';
 import { BASE_CHANGELOG_URL } from '#site/next.constants.mjs';
 import type { MinorVersion } from '#site/types';
-import { chunk } from '#site/util/arrayUtils';
 import { getNodeApiLink } from '#site/util/getNodeApiLink';
 
 import styles from './index.module.css';
@@ -21,57 +20,45 @@ export const MinorReleasesTable: FC<MinorReleasesTableProps> = ({
 }) => {
   const t = useTranslations('components.minorReleasesTable');
 
-  // Chunk minor releases into groups of 8 for scrollable display.
-  // This is to ensure that the table does not become too wide and remains user-friendly
-  const releaseGroups = chunk(releases, 8);
-
   return (
     <div className={styles.scrollable}>
-      {releaseGroups.map(releases => (
-        <table key={releases[0].version}>
-          <thead>
-            <tr>
-              <th>{t('version')}</th>
-              <th>{t('links')}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {releases.map(release => (
-              <tr key={release.version}>
-                <td>
-                  <Link kind="neutral" href={`/download/v${release.version}`}>
-                    v{release.version}
+      <table>
+        <thead>
+          <tr>
+            <th>{t('version')}</th>
+            <th>{t('links')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr />
+          {releases.map(release => (
+            <tr key={release.version}>
+              <td>
+                <Link kind="neutral" href={`/download/v${release.version}`}>
+                  v{release.version}
+                </Link>
+              </td>
+              <td>
+                <div className={styles.links}>
+                  <Link
+                    kind="neutral"
+                    href={`${BASE_CHANGELOG_URL}${release.version}`}
+                  >
+                    {t('actions.changelog')}
                   </Link>
-                </td>
-                <td>
-                  <div className={styles.links}>
-                    <Link
-                      kind="neutral"
-                      href={`https://nodejs.org/download/release/v${release.version}/`}
-                    >
-                      {t('actions.release')}
-                    </Link>
-                    <Separator orientation="vertical" />
-                    <Link
-                      kind="neutral"
-                      href={`${BASE_CHANGELOG_URL}${release.version}`}
-                    >
-                      {t('actions.changelog')}
-                    </Link>
-                    <Separator orientation="vertical" />
-                    <Link
-                      kind="neutral"
-                      href={getNodeApiLink(`v${release.version}`)}
-                    >
-                      {t('actions.docs')}
-                    </Link>
-                  </div>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      ))}
+                  <Separator orientation="vertical" />
+                  <Link
+                    kind="neutral"
+                    href={getNodeApiLink(`v${release.version}`)}
+                  >
+                    {t('actions.docs')}
+                  </Link>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
   );
 };

apps/site/components/withDownloadArchive.tsx

@@ -39,7 +39,10 @@ const WithDownloadArchive: FC<WithDownloadArchiveProps> = async ({
   }
 
   const majorVersions = releaseData.map(release => release.versionWithPrefix);
-  const releaseArtifacts = buildReleaseArtifacts(release, version);
+  const releaseArtifacts = buildReleaseArtifacts(
+    release,
+    version === 'archive' ? release.versionWithPrefix : version
+  );
 
   return <Component {...releaseArtifacts} majorVersions={majorVersions} />;
 };

apps/site/pages/en/download/archive.mdx

@@ -6,7 +6,11 @@ layout: download-archive
 <WithDownloadArchive>
   {({ binaries, installers, version, release, sources, majorVersions }) => (
     <>
-      <h1>Download Node.js® {version}</h1>
+      <h1>Node.js Download Archive</h1>
+      <h2>
+        {version}
+        {release.codename && ` (${release.codename})`}
+      </h2>
       <ReleaseOverview release={release} />
       <ul>
         <li>