From b83ad71c9175660e9efd0f5312f4bc2601b5187b Mon Sep 17 00:00:00 2001 From: Nazmul Hossain Date: Wed, 12 Aug 2026 10:24:15 +0600 Subject: [PATCH 1/7] fix: let the doc bottom navigation wrap on narrow viewports Signed-off-by: Nazmul Hossain --- src/components/patterns/DocBottomNav/DocBottomNav.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/patterns/DocBottomNav/DocBottomNav.css b/src/components/patterns/DocBottomNav/DocBottomNav.css index ea09543826..40d0c0585e 100644 --- a/src/components/patterns/DocBottomNav/DocBottomNav.css +++ b/src/components/patterns/DocBottomNav/DocBottomNav.css @@ -1,6 +1,10 @@ @layer patterns { .doc-nav { display: flex; + /* Wrap in reverse so that when the two titles cannot sit side by side the + "Next" link moves onto its own line above "Previous" instead of + overflowing the page on narrow viewports. */ + flex-wrap: wrap-reverse; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); From be47297ebcd7d96a772a08758e0100b95d448330 Mon Sep 17 00:00:00 2001 From: Nazmul Hossain Date: Wed, 12 Aug 2026 10:25:17 +0600 Subject: [PATCH 2/7] test: cover doc bottom navigation wrapping on narrow viewports Signed-off-by: Nazmul Hossain --- tests/e2e/doc-bottom-nav.spec.ts | 54 ++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 tests/e2e/doc-bottom-nav.spec.ts diff --git a/tests/e2e/doc-bottom-nav.spec.ts b/tests/e2e/doc-bottom-nav.spec.ts new file mode 100644 index 0000000000..91900c9681 --- /dev/null +++ b/tests/e2e/doc-bottom-nav.spec.ts @@ -0,0 +1,54 @@ +import { test, expect } from '@playwright/test'; + +// Regression coverage for https://github.com/expressjs/expressjs.com/issues/2486 +const DOC_PATH = '/en/guide/migrating-4/'; + +test.describe('Doc bottom navigation', () => { + test('should not overflow horizontally on a narrow viewport', async ({ page }) => { + await page.setViewportSize({ width: 400, height: 900 }); + await page.goto(DOC_PATH); + + const nav = page.locator('.doc-nav'); + await expect(nav).toBeVisible(); + + const overflow = await nav.evaluate((el) => el.scrollWidth - el.clientWidth); + expect(overflow).toBeLessThanOrEqual(1); + }); + + test('should move the next link above the previous link when they cannot share a line', async ({ + page, + }) => { + await page.setViewportSize({ width: 400, height: 900 }); + await page.goto(DOC_PATH); + + const prev = page.locator('.doc-nav__link--prev'); + const next = page.locator('.doc-nav__link--next'); + + await expect(prev).toBeVisible(); + await expect(next).toBeVisible(); + + const prevBox = await prev.boundingBox(); + const nextBox = await next.boundingBox(); + + if (!prevBox || !nextBox) { + throw new Error('expected both doc nav links to be laid out'); + } + + expect(nextBox.y + nextBox.height).toBeLessThanOrEqual(prevBox.y); + }); + + test('should keep both links on a single line on a wide viewport', async ({ page }) => { + await page.setViewportSize({ width: 1400, height: 900 }); + await page.goto(DOC_PATH); + + const prevBox = await page.locator('.doc-nav__link--prev').boundingBox(); + const nextBox = await page.locator('.doc-nav__link--next').boundingBox(); + + if (!prevBox || !nextBox) { + throw new Error('expected both doc nav links to be laid out'); + } + + expect(nextBox.y).toBeCloseTo(prevBox.y, 0); + expect(nextBox.x).toBeGreaterThan(prevBox.x); + }); +}); From a098c315945f5870f234ee4c6163f16bbc36cf58 Mon Sep 17 00:00:00 2001 From: Nazmul Hossain Date: Wed, 12 Aug 2026 10:26:21 +0600 Subject: [PATCH 3/7] docs: document the doc bottom navigation wrapping behaviour Signed-off-by: Nazmul Hossain --- docs/design-system.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/design-system.md b/docs/design-system.md index ea6d7bde81..40b0858d02 100644 --- a/docs/design-system.md +++ b/docs/design-system.md @@ -91,3 +91,14 @@ Colors are defined using OKLCH color space with `light-dark()` for theme switchi | `xs` | < 768px | `--xs-only` | | `md` | 768px – 1439px | `--md-only`, `--md-up` | | `lg` | >= 1440px | `--lg-up`, `--lg-down` | + +## Doc Bottom Navigation + +`` closes a doc page with links to the previous and next page in a single +flex row. The row uses `flex-wrap: wrap-reverse`, so when the two titles cannot sit side +by side the _Next_ link wraps onto its own line above _Previous_ instead of overflowing +the page. Viewports wide enough for both links keep them on one line. + +The DOM order stays previous-then-next, so keyboard and screen reader order is unchanged +when the row wraps. + From 4406f894e53b9beb2364fc0b1dce350a41e0bb05 Mon Sep 17 00:00:00 2001 From: Nazmul Hossain Date: Wed, 12 Aug 2026 10:30:40 +0600 Subject: [PATCH 4/7] style: drop the trailing blank line in design-system.md Signed-off-by: Nazmul Hossain --- docs/design-system.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/design-system.md b/docs/design-system.md index 40b0858d02..ce2610b9bc 100644 --- a/docs/design-system.md +++ b/docs/design-system.md @@ -101,4 +101,3 @@ the page. Viewports wide enough for both links keep them on one line. The DOM order stays previous-then-next, so keyboard and screen reader order is unchanged when the row wraps. - From a115d68e573856ddb27a8c48e78cfbf104fb0257 Mon Sep 17 00:00:00 2001 From: Nazmul Hossain Date: Wed, 12 Aug 2026 10:34:03 +0600 Subject: [PATCH 5/7] docs: reword so cspell accepts the sentence Signed-off-by: Nazmul Hossain --- docs/design-system.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/design-system.md b/docs/design-system.md index ce2610b9bc..a81564acbc 100644 --- a/docs/design-system.md +++ b/docs/design-system.md @@ -97,7 +97,7 @@ Colors are defined using OKLCH color space with `light-dark()` for theme switchi `` closes a doc page with links to the previous and next page in a single flex row. The row uses `flex-wrap: wrap-reverse`, so when the two titles cannot sit side by side the _Next_ link wraps onto its own line above _Previous_ instead of overflowing -the page. Viewports wide enough for both links keep them on one line. +the page. On wide viewports both links stay side by side on one line. The DOM order stays previous-then-next, so keyboard and screen reader order is unchanged when the row wraps. From 2bb4d11110ecf50eb820c2b0d725e64a60d1b3b7 Mon Sep 17 00:00:00 2001 From: Nazmul Hossain Date: Wed, 12 Aug 2026 10:36:42 +0600 Subject: [PATCH 6/7] docs: avoid a word the spell checker dictionary lacks Signed-off-by: Nazmul Hossain --- docs/design-system.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/design-system.md b/docs/design-system.md index a81564acbc..52827a16af 100644 --- a/docs/design-system.md +++ b/docs/design-system.md @@ -97,7 +97,7 @@ Colors are defined using OKLCH color space with `light-dark()` for theme switchi `` closes a doc page with links to the previous and next page in a single flex row. The row uses `flex-wrap: wrap-reverse`, so when the two titles cannot sit side by side the _Next_ link wraps onto its own line above _Previous_ instead of overflowing -the page. On wide viewports both links stay side by side on one line. +the page. On wider screens both links stay side by side on one line. The DOM order stays previous-then-next, so keyboard and screen reader order is unchanged when the row wraps. From 954257f1b7bbc4c68aeda84489da76026fff5181 Mon Sep 17 00:00:00 2001 From: Nazmul Hossain Date: Wed, 12 Aug 2026 12:02:37 +0600 Subject: [PATCH 7/7] ci: skip nvd.nist.gov in the link checker The linkChecker job failed with 10 request timeouts, all for the NVD advisory link in the v5 release blog post (one per locale), and 0 real errors. Ignore the domain like the other hosts here that rate limit or block automated requests. Signed-off-by: Nazmul Hossain --- .lycheeignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.lycheeignore b/.lycheeignore index 96201a040e..9d4e3c3667 100644 --- a/.lycheeignore +++ b/.lycheeignore @@ -27,3 +27,6 @@ dist/(.*/)?404((/index)?\.html|/)$ # Oracle pages return 403 when connected ^https://www\.mysql\.com/ ^https://www\.oracle\.com/ + +# NVD pages time out when requested from CI runners +^https://nvd\.nist\.gov/