From af6536774336e9406cb1acf4327b5e5ddfe3406b Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Wed, 8 Jan 2025 02:55:59 +0900
Subject: [PATCH] restore change lost

---
 .../error-overlay-pagination.tsx              | 66 ++++++++++---------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-pagination/error-overlay-pagination.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-pagination/error-overlay-pagination.tsx
index bd0ebad4c40ed..c78477271a935 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-pagination/error-overlay-pagination.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-pagination/error-overlay-pagination.tsx
@@ -116,39 +116,41 @@ export function ErrorOverlayPagination({
   }, [nav, activeIdx, readyErrors.length])
 
   return (
-    <div
-      data-nextjs-dialog-left-right
-      className="dialog-exclude-closing-from-outside-click"
+    <nav
+      className="error-overlay-pagination dialog-exclude-closing-from-outside-click"
+      ref={onNav}
     >
-      <nav ref={onNav}>
-        <button
-          ref={buttonLeft}
-          type="button"
-          disabled={activeIdx === 0}
-          aria-disabled={activeIdx === 0}
-          onClick={handlePrevious}
-        >
-          <LeftArrow title="previous" />
-        </button>
-        <button
-          ref={buttonRight}
-          type="button"
-          disabled={activeIdx === readyErrors.length - 1}
-          aria-disabled={activeIdx === readyErrors.length - 1}
-          onClick={handleNext}
-        >
-          <RightArrow title="next" />
-        </button>
-        <small>
-          <span>{activeIdx + 1}</span> of{' '}
-          <span data-nextjs-dialog-header-total-count>
-            {readyErrors.length}
-          </span>
-          {' issue'}
-          {readyErrors.length < 2 ? '' : 's'}
-        </small>
-      </nav>
-    </div>
+      <button
+        ref={buttonLeft}
+        type="button"
+        disabled={activeIdx === 0}
+        aria-disabled={activeIdx === 0}
+        onClick={handlePrevious}
+        className="error-overlay-pagination-button"
+      >
+        <LeftArrow
+          title="previous"
+          className="error-overlay-pagination-button-icon"
+        />
+      </button>
+      <div className="error-overlay-pagination-count">
+        <span>{activeIdx + 1}/</span>
+        <span data-nextjs-dialog-header-total-count>{readyErrors.length}</span>
+      </div>
+      <button
+        ref={buttonRight}
+        type="button"
+        disabled={activeIdx === readyErrors.length - 1}
+        aria-disabled={activeIdx === readyErrors.length - 1}
+        onClick={handleNext}
+        className="error-overlay-pagination-button"
+      >
+        <RightArrow
+          title="next"
+          className="error-overlay-pagination-button-icon"
+        />
+      </button>
+    </nav>
   )
 }