[dev-overlay] HOTFIX: clicking nav escapes the overlay (#75876)

Following up of #75679

### Why?

Clicking the navigation escapes the overlay. It is because the
navigation component is outside of the dialog component.

#### Before


https://github.com/user-attachments/assets/e7c63261-c44b-4af7-936d-1750dff07527

#### After


https://github.com/user-attachments/assets/979421fa-fb71-481d-bd58-6703298db28b

### How?

Since we already have logic to prevent closing overlay when clicked
outside the component for dev indicator, add the header to this CSS
selectors list as well.

Author: devjiwonchoi

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/dialog/dialog.tsx

@@ -16,6 +16,7 @@ const CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE = [
   '[data-next-mark]',
   '[data-issues-open]',
   '#nextjs-dev-tools-menu',
+  '[data-nextjs-error-overlay-nav]',
 ]
 
 const Dialog: React.FC<DialogProps> = function Dialog({

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dialog/dialog.tsx

@@ -41,11 +41,16 @@ export const DIALOG_STYLES = css`
       border-color: var(--color-gray-400);
     }
 
-    &:has(~ .error-overlay-nav .error-overlay-notch[data-side='left']) {
+    &:has(
+        ~ [data-nextjs-error-overlay-nav] .error-overlay-notch[data-side='left']
+      ) {
       border-top-left-radius: 0;
     }
 
-    &:has(~ .error-overlay-nav .error-overlay-notch[data-side='right']) {
+    &:has(
+        ~ [data-nextjs-error-overlay-nav]
+          .error-overlay-notch[data-side='right']
+      ) {
       border-top-right-radius: 0;
     }
   }

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-nav/error-overlay-nav.tsx

@@ -21,7 +21,7 @@ export function ErrorOverlayNav({
   isTurbopack,
 }: ErrorOverlayNavProps) {
   return (
-    <div className="error-overlay-nav">
+    <div data-nextjs-error-overlay-nav>
       <Notch side="left">
         {/* TODO: better passing data instead of nullish coalescing */}
         <ErrorOverlayPagination
@@ -43,7 +43,7 @@ export function ErrorOverlayNav({
 }
 
 export const styles = css`
-  .error-overlay-nav {
+  [data-nextjs-error-overlay-nav] {
     display: flex;
     justify-content: space-between;
     align-items: center;

test/lib/next-test-utils.ts

@@ -994,9 +994,11 @@ export function getRedboxNavText(browser: BrowserInterface): Promise<string> {
   return browser.eval(() => {
     const portal = [].slice
       .call(document.querySelectorAll('nextjs-portal'))
-      .find((p) => p.shadowRoot.querySelector('.error-overlay-nav'))
+      .find((p) =>
+        p.shadowRoot.querySelector('[data-nextjs-error-overlay-nav]')
+      )
     const root = portal.shadowRoot
-    return root.querySelector('.error-overlay-nav')?.innerText
+    return root.querySelector('[data-nextjs-error-overlay-nav]')?.innerText
   })
 }