[Error Overlay] Fix bottom stack animation (#75867)

### Why?

The bottom stack style was regressed.


![image](https://github.com/user-attachments/assets/5f7243e8-12e7-486d-a9ed-d88a8740bc46)

This PR closes
[NDX-808](https://linear.app/vercel/issue/NDX-808/fix-regression-in-bottom-stacks-style)

---------

Co-authored-by: Jiwon Choi <[email protected]>

Author: raunofreiberg

Diff for: packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/dialog/styles.ts

@@ -56,8 +56,8 @@ const styles = css`
   }
 
   /* Account for the footer height, when present */
-  [data-nextjs-dialog-body]:has(~ [data-nextjs-dialog-footer]) {
-    margin-bottom: calc(var(--next-dialog-footer-height) + 2px);
+  [data-nextjs-dialog][data-has-footer='true'] [data-nextjs-dialog-body] {
+    margin-bottom: var(--next-dialog-footer-height);
   }
 
   [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {
@@ -71,16 +71,21 @@ const styles = css`
   }
 
   [data-nextjs-dialog-footer] {
-    width: 100%;
-    /* We make this element absolute to fix it to the bottom during the height transition */
-    position: absolute;
-    bottom: 0;
+    /* Subtract border width */
+    width: calc(100% - 2px);
+    /* 
+      We make this element fixed to anchor it to the bottom during the height transition.
+      If you make this relative it will jump during the transition and not collapse or expand smoothly.
+      If you make this absolute it will remain stuck at its initial position when scrolling the dialog.
+    */
+    position: fixed;
+    bottom: 1px;
     min-height: var(--next-dialog-footer-height);
     border-radius: 0 0 var(--next-dialog-radius) var(--next-dialog-radius);
     overflow: hidden;
 
     > * {
-      height: 100%;
+      min-height: var(--next-dialog-footer-height);
     }
   }
 

Diff for: packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/call-stack/call-stack.tsx

@@ -127,7 +127,6 @@ function ChevronUpDown() {
 
 export const CALL_STACK_STYLES = css`
   .error-overlay-call-stack-container {
-    border-top: 1px solid var(--color-gray-400);
     position: relative;
   }
 

Diff for: packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-layout/error-overlay-layout.tsx

@@ -80,13 +80,16 @@ export function ErrorOverlayLayout({
     } as React.CSSProperties,
   }
 
+  const hasFooter = Boolean(footerMessage || errorCode)
+
   return (
     <ErrorOverlayOverlay fixed={isBuildError} {...animationProps}>
       <div data-nextjs-dialog-root {...animationProps}>
         <ErrorOverlayDialog
           onClose={onClose}
           isTurbopack={isTurbopack}
           dialogResizerRef={dialogResizerRef}
+          data-has-footer={hasFooter}
         >
           <DialogContent>
             <ErrorOverlayFloatingHeader
@@ -110,21 +113,19 @@ export function ErrorOverlayLayout({
             </ErrorOverlayDialogHeader>
 
             <ErrorOverlayDialogBody>{children}</ErrorOverlayDialogBody>
-
-            {(footerMessage || errorCode) && (
-              <DialogFooter>
-                <ErrorOverlayFooter
-                  footerMessage={footerMessage}
-                  errorCode={errorCode}
-                />
-              </DialogFooter>
-            )}
-
-            <ErrorOverlayBottomStack
-              count={readyErrors?.length ?? 0}
-              activeIdx={activeIdx ?? 0}
-            />
           </DialogContent>
+          {hasFooter && (
+            <DialogFooter>
+              <ErrorOverlayFooter
+                footerMessage={footerMessage}
+                errorCode={errorCode}
+              />
+            </DialogFooter>
+          )}
+          <ErrorOverlayBottomStack
+            count={readyErrors?.length ?? 0}
+            activeIdx={activeIdx ?? 0}
+          />
         </ErrorOverlayDialog>
       </div>
     </ErrorOverlayOverlay>