fix(ui): Sidebar scroll not showing last element

.github/workflows/build.yml

@@ -70,7 +70,7 @@ jobs:
           # See https://github.com/vercel/next.js/pull/81318
           TURBOPACK_STATS: ${{ matrix.os == 'ubuntu-latest' }}
 
-      - uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+      - uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         if: matrix.os == 'ubuntu-latest'
         with:
           name: webpack-stats

.github/workflows/bundle-compare.yml

@@ -19,15 +19,15 @@ jobs:
 
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@e3f713f2d8f53843e71c69a996d56f51aa9adfb9 # v2.14.1
+        uses: step-security/harden-runner@a90bcbc6539c36a85cdfeb73f7e2f433735f215b # v2.15.0
         with:
           egress-policy: audit
 
       - name: Git Checkout
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Download Stats (HEAD)
-        uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7.0.0
+        uses: actions/download-artifact@70fc10c6e5e1ce46ad2ea6f2b72d43f7d47b13c3 # v8.0.0
         with:
           name: webpack-stats
           path: head-stats
@@ -44,7 +44,7 @@ jobs:
           echo "run_id=$ID" >> $GITHUB_OUTPUT
 
       - name: Download Stats (BASE)
-        uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7.0.0
+        uses: actions/download-artifact@70fc10c6e5e1ce46ad2ea6f2b72d43f7d47b13c3 # v8.0.0
         with:
           name: webpack-stats
           path: base-stats

.github/workflows/chromatic.yml

@@ -62,7 +62,7 @@ jobs:
       - name: Start Visual Regression Tests (Chromatic)
         # This assigns the Environment Deployment for Storybook
         id: chromatic-deploy
-        uses: chromaui/action@07791f8243f4cb2698bf4d00426baf4b2d1cb7e0 # v13.3.5
+        uses: chromaui/action@5ec258af08deb3e8c36653bd618cb7fe52090031 # v15.2.0
         with:
           workingDir: packages/ui-components
           buildScriptName: storybook:build

.github/workflows/lighthouse.yml

@@ -65,7 +65,7 @@ jobs:
 
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@e3f713f2d8f53843e71c69a996d56f51aa9adfb9 # v2.14.1
+        uses: step-security/harden-runner@a90bcbc6539c36a85cdfeb73f7e2f433735f215b # v2.15.0
         with:
           egress-policy: audit
 

.github/workflows/playwright-cloudflare-open-next.yml

@@ -59,7 +59,7 @@ jobs:
 
       - name: Upload Playwright test results
         if: always()
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: playwright-report
           path: apps/site/playwright-report/

.github/workflows/playwright.yml

@@ -84,7 +84,7 @@ jobs:
 
       - name: Upload Playwright test results
         if: always()
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: playwright-report
           path: apps/site/playwright-report/

.github/workflows/pnpm-updater.yml

@@ -21,7 +21,7 @@ jobs:
 
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@e3f713f2d8f53843e71c69a996d56f51aa9adfb9 # v2.14.1
+        uses: step-security/harden-runner@a90bcbc6539c36a85cdfeb73f7e2f433735f215b # v2.15.0
         with:
           egress-policy: audit
 

.github/workflows/publish-packages.yml

@@ -31,7 +31,7 @@ jobs:
       matrix: ${{ steps.generate-matrix.outputs.matrix }}
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@e3f713f2d8f53843e71c69a996d56f51aa9adfb9 # v2.14.1
+        uses: step-security/harden-runner@a90bcbc6539c36a85cdfeb73f7e2f433735f215b # v2.15.0
         with:
           egress-policy: audit
 
@@ -116,10 +116,11 @@ jobs:
           # Check if a custom publish script exists in package.json
           if jq -e '.scripts.release' package.json > /dev/null; then
             pnpm run release
-          else
-            pnpm publish --access public --no-git-checks
           fi
 
+          # Then publish the package to npm
+          pnpm publish --access public --no-git-checks
+
       - name: Notify on Manual Release
         if: ${{ github.event_name == 'workflow_dispatch' }}
         uses: rtCamp/action-slack-notify@e31e87e03dd19038e411e38ae27cbad084a90661 # 2.3.3

.github/workflows/pull-request-label.yml

@@ -31,7 +31,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@e3f713f2d8f53843e71c69a996d56f51aa9adfb9 # v2.14.1
+        uses: step-security/harden-runner@a90bcbc6539c36a85cdfeb73f7e2f433735f215b # v2.15.0
         with:
           egress-policy: audit
 

.github/workflows/tmp-cloudflare-open-next-deploy.yml

@@ -30,7 +30,7 @@ jobs:
 
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@e3f713f2d8f53843e71c69a996d56f51aa9adfb9 # v2.14.1
+        uses: step-security/harden-runner@a90bcbc6539c36a85cdfeb73f7e2f433735f215b # v2.15.0
         with:
           egress-policy: audit
 

.github/workflows/translations-pr-lint.yml

@@ -42,7 +42,7 @@ jobs:
 
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@e3f713f2d8f53843e71c69a996d56f51aa9adfb9 # v2.14.1
+        uses: step-security/harden-runner@a90bcbc6539c36a85cdfeb73f7e2f433735f215b # v2.15.0
         with:
           egress-policy: audit
 

.github/workflows/translations-sync.yml

@@ -26,7 +26,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@e3f713f2d8f53843e71c69a996d56f51aa9adfb9 # v2.14.1
+        uses: step-security/harden-runner@a90bcbc6539c36a85cdfeb73f7e2f433735f215b # v2.15.0
         with:
           egress-policy: audit
 
@@ -37,7 +37,7 @@ jobs:
 
         # see all the options at https://github.com/crowdin/github-action
       - name: Crowdin PR
-        uses: crowdin/github-action@b4b468cffefb50bdd99dd83e5d2eaeb63c880380 # v2.14.0
+        uses: crowdin/github-action@8818ff65bfc4322384f983ea37e3926948c11745 # v2.15.0
         with:
           # do not upload anything - this is a one-way operation download
           upload_sources: false

.github/workflows/translations-upload.yml

@@ -18,7 +18,7 @@ jobs:
 
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@e3f713f2d8f53843e71c69a996d56f51aa9adfb9 # v2.14.1
+        uses: step-security/harden-runner@a90bcbc6539c36a85cdfeb73f7e2f433735f215b # v2.15.0
         with:
           egress-policy: audit
 
@@ -27,7 +27,7 @@ jobs:
 
         # see all the options at https://github.com/crowdin/github-action
       - name: crowdin action
-        uses: crowdin/github-action@b4b468cffefb50bdd99dd83e5d2eaeb63c880380 # v2.14.0
+        uses: crowdin/github-action@8818ff65bfc4322384f983ea37e3926948c11745 # v2.15.0
         with:
           # only upload sources, ensuring this is a one-way operation
           upload_sources: true

apps/site/components/Common/Partners/index.module.css

@@ -14,9 +14,3 @@
     grid-cols-[repeat(auto-fill,minmax(240px,1fr))]
     gap-4;
 }
-
-.tooltip {
-  @apply p-2
-    text-neutral-900
-    dark:text-neutral-200;
-}

apps/site/components/Common/Partners/index.tsx

@@ -1,4 +1,3 @@
-import Tooltip from '@node-core/ui-components/Common/Tooltip';
 import * as PartnerLogos from '@node-core/ui-components/Icons/PartnerLogos';
 
 import providePartners from '#site/next-data/providers/partners';
@@ -36,15 +35,15 @@ const renderSmallPartner = (partner: Partner) => {
   const Logo = PartnerLogos[partner.id];
 
   return (
-    <Tooltip
+    <PartnerButton
+      aria-label={partner.name}
       key={partner.id}
-      asChild
-      content={<div className={style.tooltip}>{partner.name}</div>}
+      size="small"
+      href={partner.href}
+      data-tooltip={partner.name}
     >
-      <PartnerButton aria-label={partner.name} size="small" href={partner.href}>
-        <Logo.Favicon />
-      </PartnerButton>
-    </Tooltip>
+      <Logo.Favicon />
+    </PartnerButton>
   );
 };
 

apps/site/components/Common/Supporters/index.tsx

@@ -1,5 +1,7 @@
 import Avatar from '@node-core/ui-components/Common/AvatarGroup/Avatar';
 
+import { getAcronymFromString } from '#site/util/string';
+
 import type { Supporter } from '#site/types';
 import type { FC } from 'react';
 
@@ -12,6 +14,7 @@ const SupportersList: FC<SupportersListProps> = ({ supporters }) => (
     {supporters.map(({ name, image, profile }, i) => (
       <Avatar
         nickname={name}
+        fallback={getAcronymFromString(name)}
         image={image}
         key={`${name}-${i}`}
         url={profile}

apps/site/components/Downloads/Release/PlatformDropdown.tsx

@@ -63,7 +63,7 @@ const PlatformDropdown: FC = () => {
       defaultValue={release.platform !== '' ? release.platform : undefined}
       loading={release.os === 'LOADING' || release.platform === ''}
       placeholder={t('layouts.download.dropdown.unknown')}
-      ariaLabel={t('layouts.download.dropdown.installMethod')}
+      ariaLabel={t('layouts.download.dropdown.platform')}
       onChange={platform => platform && release.setPlatform(platform)}
       className="min-w-28"
       inline={true}

apps/site/components/withMetaBar.tsx

@@ -35,11 +35,7 @@ const WithMetaBar: FC = () => {
   // Since we cannot show the same number of avatars in Mobile / Tablet
   // resolution as we do on desktop and there is overflow, we are adjusting
   // the number of avatars manually for the resolutions below
-  const isMobileResolution = useMediaQuery('(max-width: 890px)');
-
-  const isTabletResolution = useMediaQuery(
-    '(min-width: 890px) and (max-width: 1280px)'
-  );
+  const isSmallerThanDesktop = useMediaQuery('(max-width: 1280px)');
 
   return (
     <MetaBar
@@ -55,7 +51,7 @@ const WithMetaBar: FC = () => {
           )]: (
             <WithAvatarGroup
               usernames={usernames}
-              limit={isMobileResolution ? 7 : isTabletResolution ? 5 : 9}
+              limit={isSmallerThanDesktop ? 5 : 8}
             />
           ),
         }),

apps/site/components/withNavBar.tsx

@@ -19,6 +19,7 @@ import WithNodejsLogo from '#site/components/withNodejsLogo';
 import { useSiteNavigation } from '#site/hooks/generic';
 import { useRouter, usePathname } from '#site/navigation.mjs';
 
+import type { Theme } from '@node-core/ui-components/Common/ThemeToggle';
 import type { SimpleLocaleConfig } from '@node-core/ui-components/types';
 import type { FC } from 'react';
 
@@ -34,21 +35,13 @@ const ThemeToggle = dynamic(
 
 const WithNavBar: FC = () => {
   const { navigationItems } = useSiteNavigation();
-  const { resolvedTheme, setTheme } = useTheme();
+  const { theme, setTheme } = useTheme();
   const { replace } = useRouter();
   const pathname = usePathname();
   const t = useTranslations();
 
   const locale = useLocale();
 
-  const toggleCurrentTheme = () =>
-    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
-
-  const themeToggleAriaLabel =
-    resolvedTheme === 'dark'
-      ? t('components.common.themeToggle.light')
-      : t('components.common.themeToggle.dark');
-
   const changeLanguage = (locale: SimpleLocaleConfig) =>
     replace(pathname!, { locale: locale.code });
 
@@ -76,8 +69,14 @@ const WithNavBar: FC = () => {
         <SearchButton />
 
         <ThemeToggle
-          onClick={toggleCurrentTheme}
-          aria-label={themeToggleAriaLabel}
+          onChange={setTheme}
+          currentTheme={(theme as Theme) ?? 'system'}
+          ariaLabel={t('components.header.buttons.theme')}
+          themeLabels={{
+            system: t('components.header.buttons.themeSystem'),
+            light: t('components.header.buttons.themeLightMode'),
+            dark: t('components.header.buttons.themeDarkMode'),
+          }}
         />
 
         <LanguageDropdown

apps/site/layouts/Post.tsx

@@ -26,6 +26,8 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
       <WithNavBar />
 
       <div className={styles.contentLayout}>
+        <div></div>
+
         <div className={styles.postLayout}>
           <main id="main" tabIndex={-1}>
             {type === 'vulnerability' && <EOLAlert />}

apps/site/layouts/layouts.module.css

@@ -1,12 +1,12 @@
 @reference "../styles/index.css";
 
 .baseLayout {
-  @apply grid
+  @apply ml:grid
+    ml:grid-cols-[1fr]
+    ml:grid-rows-[auto_1fr_auto]
     h-max
     min-h-full
-    w-full
-    grid-cols-[1fr]
-    grid-rows-[auto_1fr_auto];
+    w-full;
 }
 
 .centeredLayout {
@@ -104,7 +104,7 @@
     justify-center;
 
   main {
-    @apply max-w-5xl
+    @apply max-w-7xl
       gap-4
       px-4
       py-12
@@ -135,17 +135,19 @@
 }
 
 .contentLayout {
-  @apply max-w-8xl
+  @apply max-w-10xl
     max-ml:m-0
-    max-ml:block
+    3xl:grid-cols-[--spacing(80)_1fr_--spacing(80)]
+    ml:grid-cols-[0_1fr_--spacing(56)]
+    ml:grid
     mx-auto
-    grid
+    block
     w-full
     grid-rows-[1fr]
-    sm:grid-cols-[1fr_--spacing(52)]
-    xl:grid-cols-[1fr_--spacing(80)];
+    xl:grid-cols-[--spacing(56)_1fr_--spacing(64)]
+    2xl:grid-cols-[--spacing(72)_1fr_--spacing(72)];
 
-  > *:nth-child(1) {
+  > *:nth-child(2) {
     @apply bg-gradient-subtle
       dark:bg-gradient-subtle-dark
       max-ml:border-l-0
@@ -164,13 +166,12 @@
       dark:border-l-neutral-900;
 
     main {
-      @apply max-w-[660px]
-        gap-4
+      @apply gap-4
         wrap-anywhere;
     }
   }
 
-  > *:nth-child(2) {
+  > *:nth-child(3) {
     @apply ml:mt-0
       ml:max-w-xs
       ml:border-l

apps/site/next-data/generators/majorNodeReleases.mjs

@@ -2,11 +2,13 @@
 
 import nodevu from '@nodevu/core';
 
+import { fetchWithRetry } from '#site/next.fetch.mjs';
+
 /**
  * Filters Node.js release data to return only major releases with documented support.
  */
 export default async function getMajorNodeReleases() {
-  const nodevuData = await nodevu({ fetch });
+  const nodevuData = await nodevu({ fetch: fetchWithRetry });
 
   return Object.entries(nodevuData).filter(([version, { support }]) => {
     // Filter out those without documented support