From 716bd0e83567e6a18dbb62ffee4504a2dfbc9117 Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Wed, 15 Jan 2025 07:41:09 +0900
Subject: [PATCH] decouple

---
 .../error-overlay-layout/error-overlay-layout.tsx    |  7 ++++---
 .../internal/components/Errors/overlay/overlay.tsx   | 12 ++++++++++++
 .../internal/components/Overlay/styles.tsx           |  2 +-
 3 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/overlay/overlay.tsx

diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx
index 3a7cd86f83a03..815367dfa4e0b 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx
@@ -5,7 +5,6 @@ import type { ErrorMessageType } from '../error-message/error-message'
 import type { ErrorType } from '../error-type-label/error-type-label'
 
 import { DialogContent, DialogFooter } from '../../Dialog'
-import { Overlay } from '../../Overlay'
 import {
   ErrorOverlayToolbar,
   styles as toolbarStyles,
@@ -33,6 +32,7 @@ import {
 } from '../dialog/header'
 import { ErrorOverlayDialogBody, DIALOG_BODY_STYLES } from '../dialog/body'
 import { CALL_STACK_STYLES } from '../call-stack/call-stack'
+import { OVERLAY_STYLES, ErrorOverlayOverlay } from '../overlay/overlay'
 
 type ErrorOverlayLayoutProps = {
   errorMessage: ErrorMessageType
@@ -69,7 +69,7 @@ export function ErrorOverlayLayout({
   isTurbopack,
 }: ErrorOverlayLayoutProps) {
   return (
-    <Overlay fixed={isBuildError}>
+    <ErrorOverlayOverlay fixed={isBuildError}>
       <ErrorOverlayDialog onClose={onClose} isTurbopack={isTurbopack}>
         <DialogContent>
           <ErrorOverlayFloatingHeader
@@ -107,11 +107,12 @@ export function ErrorOverlayLayout({
           </DialogFooter>
         </DialogContent>
       </ErrorOverlayDialog>
-    </Overlay>
+    </ErrorOverlayOverlay>
   )
 }
 
 export const styles = css`
+  ${OVERLAY_STYLES}
   ${DIALOG_STYLES}
   ${DIALOG_HEADER_STYLES}
   ${DIALOG_BODY_STYLES}
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/overlay/overlay.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/overlay/overlay.tsx
new file mode 100644
index 0000000000000..4df3f15dca018
--- /dev/null
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/overlay/overlay.tsx
@@ -0,0 +1,12 @@
+import { noop as css } from '../../../helpers/noop-template'
+import { Overlay, type OverlayProps } from '../../Overlay/Overlay'
+
+export function ErrorOverlayOverlay({ children, ...props }: OverlayProps) {
+  return <Overlay {...props}>{children}</Overlay>
+}
+
+export const OVERLAY_STYLES = css`
+  [data-nextjs-dialog-overlay] {
+    top: var(--size-8_5);
+  }
+`
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Overlay/styles.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Overlay/styles.tsx
index 95b45a8bfff35..143e7ef08fd8b 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Overlay/styles.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Overlay/styles.tsx
@@ -3,7 +3,7 @@ import { noop as css } from '../../helpers/noop-template'
 const styles = css`
   [data-nextjs-dialog-overlay] {
     position: fixed;
-    top: var(--size-8_5);
+    top: 0;
     right: 0;
     bottom: 0;
     left: 0;