[dev-overlay] Fix error dialog resizing logic

packages/next/src/client/components/react-dev-overlay/ui/components/dialog/dialog.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { useOnClickOutside } from '../../hooks/use-on-click-outside'
-import { useMeasureHeight } from '../../hooks/use-measure-height'
 
 export type DialogProps = {
   children?: React.ReactNode
@@ -37,9 +36,6 @@ const Dialog: React.FC<DialogProps> = function Dialog({
       : undefined
   )
 
-  const ref = React.useRef<HTMLDivElement | null>(null)
-  const [height, pristine] = useMeasureHeight(ref)
-
   useOnClickOutside(
     dialogRef.current,
     CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE,
@@ -102,19 +98,7 @@ const Dialog: React.FC<DialogProps> = function Dialog({
       }}
       {...props}
     >
-      <div
-        ref={dialogResizerRef}
-        data-nextjs-dialog-sizer
-        // [x] Don't animate on initial load
-        // [x] No duplicate elements
-        // [x] Responds to content growth
-        style={{
-          height,
-          transition: pristine ? undefined : 'height 250ms var(--timing-swift)',
-        }}
-      >
-        <div ref={ref}>{children}</div>
-      </div>
+      {children}
     </div>
   )
 }

packages/next/src/client/components/react-dev-overlay/ui/components/dialog/styles.ts

@@ -3,7 +3,7 @@ const styles = `
     --next-dialog-radius: var(--rounded-xl);
     --next-dialog-max-width: 960px;
     --next-dialog-row-padding: 16px;
-    --next-dialog-padding-x: 12px;
+    --next-dialog-padding: 12px;
     --next-dialog-notch-height: 42px;
     --next-dialog-border-width: 1px;
 
@@ -14,7 +14,7 @@ const styles = `
     max-width: var(--next-dialog-max-width);
     margin-right: auto;
     margin-left: auto;
-    scale: 0.98;
+    scale: 0.97;
     opacity: 0;
     transition-property: scale, opacity;
     transition-duration: var(--transition-duration);
@@ -28,7 +28,7 @@ const styles = `
     [data-nextjs-scroll-fader][data-side="top"] {
       left: 1px;
       top: calc(var(--next-dialog-notch-height) + var(--next-dialog-border-width));
-      width: calc(100% - var(--next-dialog-padding-x));
+      width: calc(100% - var(--next-dialog-padding));
       opacity: 0;
     }
   }
@@ -82,7 +82,7 @@ const styles = `
     display: flex;
     flex-direction: column;
     position: relative;
-    padding: 16px var(--next-dialog-padding-x);
+    padding: var(--next-dialog-padding);
   }
 
   [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {

packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay-layout/error-overlay-layout.test.tsx

@@ -24,6 +24,7 @@ const renderTestComponent = () => {
       rendered={true}
       transitionDurationMs={200}
       isTurbopack={false}
+      errorCount={1}
       versionInfo={{
         installed: '15.0.0',
         staleness: 'fresh',

packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay-layout/error-overlay-layout.tsx

@@ -36,6 +36,7 @@ import type { ReadyRuntimeError } from '../../../../utils/get-error-by-type'
 import { EnvironmentNameLabel } from '../environment-name-label/environment-name-label'
 import { useFocusTrap } from '../dev-tools-indicator/utils'
 import { Fader } from '../../fader'
+import { Resizer } from '../../resizer'
 
 export interface ErrorOverlayLayoutProps extends ErrorBaseProps {
   errorMessage: ErrorMessageType
@@ -59,6 +60,7 @@ export function ErrorOverlayLayout({
   errorType,
   children,
   errorCode,
+  errorCount,
   error,
   debugInfo,
   isBuildError,
@@ -83,6 +85,10 @@ export function ErrorOverlayLayout({
     } as React.CSSProperties,
   }
 
+  const [animating, setAnimating] = React.useState(
+    Boolean(transitionDurationMs)
+  )
+
   const faderRef = React.useRef<HTMLDivElement | null>(null)
   const hasFooter = Boolean(footerMessage || errorCode)
   const dialogRef = React.useRef<HTMLDivElement | null>(null)
@@ -95,9 +101,23 @@ export function ErrorOverlayLayout({
     }
   }
 
+  function onTransitionEnd({ propertyName, target }: React.TransitionEvent) {
+    // We can only measure height after the `scale` transition ends,
+    // otherwise we will measure height as a multiple of the animating value
+    // which will give us an incorrect value.
+    if (propertyName === 'scale' && target === dialogRef.current) {
+      setAnimating(false)
+    }
+  }
+
   return (
     <ErrorOverlayOverlay fixed={isBuildError} {...animationProps}>
-      <div data-nextjs-dialog-root ref={dialogRef} {...animationProps}>
+      <div
+        data-nextjs-dialog-root
+        onTransitionEnd={onTransitionEnd}
+        ref={dialogRef}
+        {...animationProps}
+      >
         <ErrorOverlayNav
           runtimeErrors={runtimeErrors}
           activeIdx={activeIdx}
@@ -119,30 +139,37 @@ export function ErrorOverlayLayout({
             )
           }
         >
-          <DialogContent>
-            <ErrorOverlayDialogHeader>
-              <div
-                className="nextjs__container_errors__error_title"
-                // allow assertion in tests before error rating is implemented
-                data-nextjs-error-code={errorCode}
-              >
-                <span data-nextjs-error-label-group>
-                  <ErrorTypeLabel errorType={errorType} />
-                  {error.environmentName && (
-                    <EnvironmentNameLabel
-                      environmentName={error.environmentName}
-                    />
-                  )}
-                </span>
-                <ErrorOverlayToolbar error={error} debugInfo={debugInfo} />
-              </div>
-              <ErrorMessage errorMessage={errorMessage} />
-            </ErrorOverlayDialogHeader>
+          <Resizer
+            ref={dialogResizerRef}
+            measure={!animating}
+            data-nextjs-dialog-sizer
+          >
+            <DialogContent>
+              <ErrorOverlayDialogHeader>
+                <div
+                  className="nextjs__container_errors__error_title"
+                  // allow assertion in tests before error rating is implemented
+                  data-nextjs-error-code={errorCode}
+                >
+                  <span data-nextjs-error-label-group>
+                    <ErrorTypeLabel errorType={errorType} />
+                    {error.environmentName && (
+                      <EnvironmentNameLabel
+                        environmentName={error.environmentName}
+                      />
+                    )}
+                  </span>
+                  <ErrorOverlayToolbar error={error} debugInfo={debugInfo} />
+                </div>
+                <ErrorMessage errorMessage={errorMessage} />
+              </ErrorOverlayDialogHeader>
+
+              <ErrorOverlayDialogBody>{children}</ErrorOverlayDialogBody>
+            </DialogContent>
+          </Resizer>
 
-            <ErrorOverlayDialogBody>{children}</ErrorOverlayDialogBody>
-          </DialogContent>
           <ErrorOverlayBottomStack
-            errorCount={runtimeErrors?.length ?? 0}
+            errorCount={errorCount}
             activeIdx={activeIdx ?? 0}
           />
         </ErrorOverlayDialog>

packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay/error-overlay.tsx

@@ -13,18 +13,21 @@ export interface ErrorBaseProps {
   transitionDurationMs: number
   isTurbopack: boolean
   versionInfo: OverlayState['versionInfo']
+  errorCount: number
 }
 
 export function ErrorOverlay({
   state,
   runtimeErrors,
   isErrorOverlayOpen,
   setIsErrorOverlayOpen,
+  errorCount,
 }: {
   state: OverlayState
   runtimeErrors: ReadyRuntimeError[]
   isErrorOverlayOpen: boolean
   setIsErrorOverlayOpen: (value: boolean) => void
+  errorCount: number
 }) {
   const isTurbopack = !!process.env.TURBOPACK
 
@@ -38,6 +41,7 @@ export function ErrorOverlay({
     transitionDurationMs,
     isTurbopack,
     versionInfo: state.versionInfo,
+    errorCount,
   }
 
   if (state.buildError !== null) {

packages/next/src/client/components/react-dev-overlay/ui/components/resizer/index.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from 'react'
+
+export function Resizer({
+  children,
+  measure,
+  ...props
+}: {
+  children: React.ReactNode
+  measure: boolean
+} & React.HTMLProps<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const [height, measuring] = useMeasureHeight(ref, measure)
+
+  return (
+    <div
+      {...props}
+      // [x] Don't animate on initial load
+      // [x] No duplicate elements
+      // [x] Responds to content growth
+      style={{
+        height: measuring ? 'auto' : height,
+        transition: 'height 250ms var(--timing-swift)',
+      }}
+    >
+      <div ref={ref}>{children}</div>
+    </div>
+  )
+}
+
+function useMeasureHeight(
+  ref: React.RefObject<HTMLDivElement | null>,
+  measure: boolean
+): [number, boolean] {
+  const [height, setHeight] = useState<number>(0)
+  const [measuring, setMeasuring] = useState<boolean>(true)
+
+  useEffect(() => {
+    if (!measure) {
+      return
+    }
+
+    let timerId: number
+    const el = ref.current
+
+    if (!el) {
+      return
+    }
+
+    const observer = new ResizeObserver(([{ contentRect }]) => {
+      clearTimeout(timerId)
+
+      timerId = window.setTimeout(() => {
+        setMeasuring(false)
+      }, 100)
+
+      setHeight(contentRect.height)
+    })
+
+    observer.observe(el)
+    return () => observer.disconnect()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [measure])
+
+  return [height, measuring]
+}

packages/next/src/client/components/react-dev-overlay/ui/container/errors.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, useRef, Suspense } from 'react'
+import { useState, useMemo, useRef, Suspense } from 'react'
 import type { DebugInfo } from '../../types'
 import { Overlay } from '../components/overlay'
 import { RuntimeError } from './runtime-error'
@@ -89,18 +89,6 @@ export function Errors({
 }: ErrorsProps) {
   const dialogResizerRef = useRef<HTMLDivElement | null>(null)
 
-  useEffect(() => {
-    // Close the error overlay when pressing escape
-    function handleKeyDown(event: KeyboardEvent) {
-      if (event.key === 'Escape') {
-        onClose()
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [onClose])
-
   const isLoading = useMemo<boolean>(() => {
     return runtimeErrors.length < 1
   }, [runtimeErrors.length])

packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.stories.tsx

@@ -92,9 +92,8 @@ export const Default: Story = {
           src={imgApp}
           style={{
             width: '100%',
-            height: '100%',
+            height: '100vh',
             objectFit: 'contain',
-            filter: 'invert(1)',
           }}
         />
         <DevOverlay

packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.tsx

@@ -50,6 +50,7 @@ export function DevOverlay({
               <ErrorOverlay
                 state={state}
                 runtimeErrors={runtimeErrors}
+                errorCount={totalErrorCount}
                 isErrorOverlayOpen={isErrorOverlayOpen}
                 setIsErrorOverlayOpen={setIsErrorOverlayOpen}
               />