feat: fixed header for scrollable table, minor version identifier and stateless select fixes

Author: canerakdas

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

@@ -18,6 +18,16 @@
     flex
     max-h-[29rem]
     overflow-y-auto;
+
+  table {
+    @apply xs:border-t-0
+      border-t;
+  }
+
+  th {
+    @apply xs:border-t
+      border-neutral-200;
+  }
 }
 
 .information {
@@ -27,3 +37,14 @@
 .links {
   @apply md:w-44;
 }
+
+.stickyHeader {
+  @apply top-0
+    z-10
+    border-t
+    bg-white
+    text-left
+    font-semibold
+    sm:sticky
+    dark:bg-neutral-950;
+}

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

@@ -25,7 +25,7 @@ const MinorReleasesTable: FC<MinorReleasesTableProps> = ({ releases }) => {
   return (
     <div className={styles.scrollable}>
       <table>
-        <thead>
+        <thead className={styles.stickyHeader}>
           <tr>
             <th>{t('minorReleasesTable.version')}</th>
             <th className={styles.information}>

apps/site/util/download/archive.tsx

@@ -109,7 +109,7 @@ export const getDownloadArchiveNavigation = (releases: Array<NodeRelease>) => {
       }
 
       acc[status].push({
-        label: `Node.js v${major} ${codename ? `(${codename})` : ''}`,
+        label: `Node.js v${major}.x ${codename ? `(${codename})` : ''}`,
         value: `/download/${versionWithPrefix}`,
       });
 

packages/ui-components/src/Common/Select/index.module.css

@@ -161,12 +161,17 @@
 }
 
 .noscript {
-  @apply relative;
+  @apply relative
+    cursor-pointer;
 
   summary {
     @apply flex
       w-full
       justify-between;
+
+    span {
+      @apply pl-0;
+    }
   }
 
   .trigger {