[DevOverlay] Fix Style Regression

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts

@@ -9,9 +9,8 @@ const styles = css`
     max-height: calc(100% - 56px);
     margin-right: auto;
     margin-left: auto;
-
-    z-index: 50;
     outline: none;
+    overflow-y: hidden;
   }
 
   @media (max-height: 812px) {

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

@@ -31,7 +31,6 @@ export const DIALOG_STYLES = css`
     border: 1px solid var(--color-gray-400);
     border-radius: var(--rounded-xl);
     box-shadow: var(--shadow-md);
-    position: relative;
   }
 
   .nextjs-error-overlay-dialog-turbopack-background {

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks.tsx

@@ -38,10 +38,8 @@ export const styles = css`
     flex-direction: column;
     width: 100%;
     outline: none;
-    position: absolute;
-    bottom: -10px;
     z-index: -1;
-
+    position: fixed;
     @media (min-width: 576px) {
       max-width: 540px;
     }
@@ -57,26 +55,24 @@ export const styles = css`
 
   .error-overlay-bottom-stack-1,
   .error-overlay-bottom-stack-2 {
-    padding: 12px;
+    padding: var(--size-3);
     align-self: center;
     border: 1px solid var(--color-gray-400);
     border-radius: var(--rounded-xl);
     box-shadow: var(--shadow-md);
     background: var(--color-background-200);
     animation: stack-slide-down 0.3s ease-out forwards;
-    transform-origin: top center;
-    position: relative;
   }
 
   .error-overlay-bottom-stack-1 {
-    width: calc(100% - 24px);
+    width: calc(100% - var(--size-6));
+    margin-top: calc(-1 * var(--size-3));
   }
 
   .error-overlay-bottom-stack-2 {
+    width: calc(100% - var(--size-12));
+    margin-top: calc(-1 * var(--size-3_5));
     z-index: -2;
-    position: absolute;
-    top: 10px;
-    width: calc(100% - 48px);
   }
 
   @keyframes stack-slide-down {

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.stories.tsx

@@ -41,4 +41,17 @@ export const Default: Story = {
       staleness: 'stale-major',
     },
   },
+  parameters: {
+    docs: {
+      story: { inline: true },
+    },
+  },
+  decorators: [
+    (Story) => (
+      // Offset the translateY applied to the floating header.
+      <div style={{ paddingTop: 'var(--size-10_5)' }}>
+        <Story />
+      </div>
+    ),
+  ],
 }

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.tsx

@@ -43,8 +43,8 @@ export const styles = css`
     align-items: center;
 
     width: 100%;
-    position: absolute;
-    transform: translateY(-42px);
+    position: fixed;
+    transform: translateY(calc(-1 * var(--size-10_5)));
 
     outline: none;
 

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx

@@ -71,14 +71,15 @@ export function ErrorOverlayLayout({
   return (
     <Overlay fixed={isBuildError}>
       <ErrorOverlayDialog onClose={onClose} isTurbopack={isTurbopack}>
-        <ErrorOverlayFloatingHeader
-          readyErrors={readyErrors}
-          activeIdx={activeIdx}
-          setActiveIndex={setActiveIndex}
-          versionInfo={versionInfo}
-          isTurbopack={isTurbopack}
-        />
         <DialogContent>
+          <ErrorOverlayFloatingHeader
+            readyErrors={readyErrors}
+            activeIdx={activeIdx}
+            setActiveIndex={setActiveIndex}
+            versionInfo={versionInfo}
+            isTurbopack={isTurbopack}
+          />
+
           <ErrorOverlayDialogHeader isTurbopack={isTurbopack}>
             <div
               className="nextjs__container_errors__error_title"
@@ -99,12 +100,12 @@ export function ErrorOverlayLayout({
               footerMessage={footerMessage}
               errorCode={errorCode!}
             />
+            <ErrorOverlayBottomStacks
+              errorsCount={readyErrors?.length ?? 0}
+              activeIdx={activeIdx ?? 0}
+            />
           </DialogFooter>
         </DialogContent>
-        <ErrorOverlayBottomStacks
-          errorsCount={readyErrors?.length ?? 0}
-          activeIdx={activeIdx ?? 0}
-        />
       </ErrorOverlayDialog>
     </Overlay>
   )

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

@@ -79,12 +79,22 @@ export function Base() {
           --size-3: 0.75rem; /* 12px */
           --size-3_5: 0.875rem; /* 14px */
           --size-4: 1rem; /* 16px */
+          --size-4_5: 1.125rem; /* 18px */
           --size-5: 1.25rem; /* 20px */
+          --size-5_5: 1.375rem; /* 22px */
           --size-6: 1.5rem; /* 24px */
+          --size-6_5: 1.625rem; /* 26px */
           --size-7: 1.75rem; /* 28px */
+          --size-7_5: 1.875rem; /* 30px */
           --size-8: 2rem; /* 32px */
+          --size-8_5: 2.125rem; /* 34px */
           --size-9: 2.25rem; /* 36px */
+          --size-9_5: 2.375rem; /* 38px */
           --size-10: 2.5rem; /* 40px */
+          --size-10_5: 2.625rem; /* 42px */
+          --size-11: 2.75rem; /* 44px */
+          --size-11_5: 2.875rem; /* 46px */
+          --size-12: 3rem; /* 48px */
         }
 
         @media (prefers-color-scheme: dark) {