[DevOverlay] Floating Header and Bottom Stacks

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

@@ -13,7 +13,7 @@ const styles = css`
     border-radius: var(--rounded-xl);
     box-shadow: var(--shadow-md);
     max-height: calc(100% - 56px);
-    overflow-y: hidden;
+    position: relative;
   }
 
   @media (max-height: 812px) {

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

@@ -37,9 +37,10 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     width: 100%;
-    margin-right: auto;
-    margin-left: auto;
     outline: none;
+    position: absolute;
+    bottom: -10px;
+    z-index: -1;
 
     @media (min-width: 576px) {
       max-width: 540px;
@@ -56,25 +57,26 @@ export const styles = css`
 
   .error-overlay-bottom-stack-1,
   .error-overlay-bottom-stack-2 {
-    padding: 0.75rem;
+    padding: 12px;
     align-self: center;
     border: 1px solid var(--color-gray-400);
     border-radius: var(--rounded-xl);
-    margin-top: -1rem; /* 16px */
     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 {
-    z-index: 49;
-    width: calc(100% - 1.5rem); /* 24px */
+    width: calc(100% - 24px);
   }
 
   .error-overlay-bottom-stack-2 {
-    z-index: 48;
-    width: calc(100% - 3rem); /* 48px */
+    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

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ErrorOverlayFloatingHeader } from './error-overlay-floating-header'
+import { withShadowPortal } from '../../../storybook/with-shadow-portal'
+
+const meta: Meta<typeof ErrorOverlayFloatingHeader> = {
+  title: 'ErrorOverlayFloatingHeader',
+  component: ErrorOverlayFloatingHeader,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [withShadowPortal],
+}
+
+export default meta
+type Story = StoryObj<typeof ErrorOverlayFloatingHeader>
+
+export const Default: Story = {
+  args: {
+    readyErrors: [
+      {
+        id: 0,
+        runtime: true,
+        error: new Error('First error message'),
+        frames: [],
+      },
+      {
+        id: 1,
+        runtime: true,
+        error: new Error('Second error message'),
+        frames: [],
+      },
+      {
+        id: 2,
+        runtime: true,
+        error: new Error('Third error message'),
+        frames: [],
+      },
+    ],
+    activeIdx: 1,
+    versionInfo: {
+      installed: '15.0.0',
+      staleness: 'stale-major',
+    },
+  },
+}

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

@@ -0,0 +1,58 @@
+import type { ReadyRuntimeError } from '../../../helpers/get-error-by-type'
+import type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info'
+
+import { ErrorPagination } from '../ErrorPagination/ErrorPagination'
+import { VersionStalenessInfo } from '../../VersionStalenessInfo'
+import { noop as css } from '../../../helpers/noop-template'
+
+type ErrorOverlayFloatingHeaderProps = {
+  readyErrors?: ReadyRuntimeError[]
+  activeIdx?: number
+  setActiveIndex?: (index: number) => void
+  versionInfo?: VersionInfo
+}
+
+export function ErrorOverlayFloatingHeader({
+  readyErrors,
+  activeIdx,
+  setActiveIndex,
+  versionInfo,
+}: ErrorOverlayFloatingHeaderProps) {
+  return (
+    <div className="error-overlay-floating-header">
+      {/* TODO: better passing data instead of nullish coalescing */}
+      <ErrorPagination
+        readyErrors={readyErrors ?? []}
+        activeIdx={activeIdx ?? 0}
+        onActiveIndexChange={setActiveIndex ?? (() => {})}
+      />
+      <VersionStalenessInfo versionInfo={versionInfo} />
+    </div>
+  )
+}
+
+export const styles = css`
+  .error-overlay-floating-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    width: 100%;
+    position: absolute;
+    transform: translateY(-32px);
+
+    outline: none;
+
+    @media (min-width: 576px) {
+      max-width: 540px;
+    }
+
+    @media (min-width: 768px) {
+      max-width: 720px;
+    }
+
+    @media (min-width: 992px) {
+      max-width: 960px;
+    }
+  }
+`

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

@@ -12,12 +12,10 @@ import {
   DialogFooter,
 } from '../../Dialog'
 import { Overlay } from '../../Overlay'
-import { ErrorPagination } from '../ErrorPagination/ErrorPagination'
 import {
   ErrorOverlayToolbar,
   styles as toolbarStyles,
 } from '../error-overlay-toolbar/error-overlay-toolbar'
-import { VersionStalenessInfo } from '../../VersionStalenessInfo'
 import { ErrorOverlayBottomStacks } from '../error-overlay-bottom-stacks/error-overlay-bottom-stacks'
 import { ErrorOverlayFooter } from '../error-overlay-footer/error-overlay-footer'
 import { noop as css } from '../../../helpers/noop-template'
@@ -29,6 +27,10 @@ import {
   ErrorTypeLabel,
   styles as errorTypeLabelStyles,
 } from '../error-type-label/error-type-label'
+import {
+  ErrorOverlayFloatingHeader,
+  styles as floatingHeaderStyles,
+} from '../error-overlay-floating-header/error-overlay-floating-header'
 
 type ErrorOverlayLayoutProps = {
   errorMessage: ErrorMessageType
@@ -70,14 +72,14 @@ export function ErrorOverlayLayout({
         aria-describedby="nextjs__container_errors_desc"
         onClose={onClose}
       >
+        <ErrorOverlayFloatingHeader
+          readyErrors={readyErrors}
+          activeIdx={activeIdx}
+          setActiveIndex={setActiveIndex}
+          versionInfo={versionInfo}
+        />
         <DialogContent>
           <DialogHeader className="nextjs-container-errors-header">
-            {/* TODO: better passing data instead of nullish coalescing */}
-            <ErrorPagination
-              readyErrors={readyErrors ?? []}
-              activeIdx={activeIdx ?? 0}
-              onActiveIndexChange={setActiveIndex ?? (() => {})}
-            />
             <div
               className="nextjs__container_errors__error_title"
               // allow assertion in tests before error rating is implemented
@@ -86,7 +88,6 @@ export function ErrorOverlayLayout({
               <ErrorTypeLabel errorType={errorType} />
               <ErrorOverlayToolbar error={error} debugInfo={debugInfo} />
             </div>
-            <VersionStalenessInfo versionInfo={versionInfo} />
             <ErrorMessage errorMessage={errorMessage} />
           </DialogHeader>
           <DialogBody className="nextjs-container-errors-body">
@@ -100,16 +101,17 @@ export function ErrorOverlayLayout({
             />
           </DialogFooter>
         </DialogContent>
+        <ErrorOverlayBottomStacks
+          errorsCount={readyErrors?.length ?? 0}
+          activeIdx={activeIdx ?? 0}
+        />
       </Dialog>
-      <ErrorOverlayBottomStacks
-        errorsCount={readyErrors?.length ?? 0}
-        activeIdx={activeIdx ?? 0}
-      />
     </Overlay>
   )
 }
 
 export const styles = css`
+  ${floatingHeaderStyles}
   ${errorTypeLabelStyles}
   ${errorMessageStyles}
   ${toolbarStyles}