decouple

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}

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);
+  }
+`

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;