Tweak error overlay nav overflow

[yavorpunchev]

What?

Tweaks the mobile behavior of the error overlay nav so the controls can scroll horizontally without breaking the version badge into multiple lines.

CleanShot.2026-05-27.at.11.20.27.mp4

Why?

On narrow screens the nav content can overflow, and the Next.js version badge was wrapping internally instead of staying intact while the nav scrolled.

How?

• allow the error overlay nav row to scroll horizontally on mobile
• add a small gap between the left and right nav groups
• keep the version status badge on a single line with white-space: nowrap

Verification

• pnpm prettier --check packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-nav/error-overlay-nav.tsx packages/next/src/next-devtools/dev-overlay/components/version-staleness-info/version-staleness-info.tsx
• Not run: pnpm --filter=next types (not needed for these CSS-only tweaks)

[github-actions]

Failing test suites

Commit: d9166c8 | About building and testing Next.js

pnpm test-dev test/e2e/app-dir/instant-navigation-testing-api/instant-navigation-testing-api.test.ts (job)

• instant-navigation-testing-api > renders runtime-prefetched content instantly during navigation (DD)

Expand output

● instant-navigation-testing-api › renders runtime-prefetched content instantly during navigation

locator.waitFor: Timeout 60000ms exceeded.
Call log:
  - waiting for locator('[data-testid="search-param-value"]') to be visible

  105 |         '[data-testid="search-param-value"]'
  106 |       )
> 107 |       await searchParamValue.waitFor({ state: 'visible' })
      |                              ^
  108 |       expect(await searchParamValue.textContent()).toContain(
  109 |         'myParam: testValue'
  110 |       )

  at waitFor (e2e/app-dir/instant-navigation-testing-api/instant-navigation-testing-api.test.ts:107:30)
  at instant (../packages/next-playwright/dist/index.js:50:16)
  at Object.<anonymous> (e2e/app-dir/instant-navigation-testing-api/instant-navigation-testing-api.test.ts:99:5)

pnpm test-dev test/development/app-dir/instant-navs-devtools/instant-navs-devtools.test.ts (job)

• instant-nav-panel > transitions between capture types > should avoid showing stale SPA state when reloading from a captured SPA state into captured MPA state (DD)

Expand output

● instant-nav-panel › transitions between capture types › should avoid showing stale SPA state when reloading from a captured SPA state into captured MPA state

locator.waitFor: Timeout 30000ms exceeded.
Call log:
  - waiting for locator('[data-testid="dynamic-skeleton"]') to be visible

  206 |     await browser
  207 |       .locator('[data-testid="dynamic-skeleton"]')
> 208 |       .waitFor({ state: 'visible', timeout: 30000 })
      |        ^
  209 |     await browser
  210 |       .locator('[data-testid="param-skeleton"]')
  211 |       .waitFor({ state: 'visible' })

  at waitFor (development/app-dir/instant-navs-devtools/instant-navs-devtools.test.ts:208:8)
  at Object.expectTargetPageMpaShell (development/app-dir/instant-navs-devtools/instant-navs-devtools.test.ts:579:13)

pnpm test-dev test/development/app-dir/instant-navs-devtools/instant-navs-devtools.test.ts (job)

• instant-nav-panel > transitions between capture types > should avoid showing stale SPA state when reloading from a captured SPA state into captured MPA state (DD)

Expand output

● instant-nav-panel › transitions between capture types › should avoid showing stale SPA state when reloading from a captured SPA state into captured MPA state

locator.waitFor: Timeout 30000ms exceeded.
Call log:
  - waiting for locator('[data-testid="dynamic-skeleton"]') to be visible

  206 |     await browser
  207 |       .locator('[data-testid="dynamic-skeleton"]')
> 208 |       .waitFor({ state: 'visible', timeout: 30000 })
      |        ^
  209 |     await browser
  210 |       .locator('[data-testid="param-skeleton"]')
  211 |       .waitFor({ state: 'visible' })

  at waitFor (development/app-dir/instant-navs-devtools/instant-navs-devtools.test.ts:208:8)
  at Object.expectTargetPageMpaShell (development/app-dir/instant-navs-devtools/instant-navs-devtools.test.ts:579:13)

[github-actions]

Stats skipped

Commit: d9166c8
View workflow run