[dev-overlay] sync style diffs with new design (#75949)

This PR synced style with the re-redesign.

| Before | After |
|--------|--------|
| ![CleanShot 2025-02-14 at 01 43 59](https://github.com/user-attachments/assets/d10e9c02-d26f-4a31-8707-707b000a687f) | ![CleanShot 2025-02-14 at 01 44 27](https://github.com/user-attachments/assets/0d0e4571-c90b-4431-a6aa-69c21a1135c7) |
| ![CleanShot 2025-02-14 at 01 46 09](https://github.com/user-attachments/assets/6b2073bc-d7b4-43ee-8c12-e6e4505fc1b9) | ![CleanShot 2025-02-14 at 01 46 05](https://github.com/user-attachments/assets/7dc0a360-8382-43f4-a64b-c212a56b326b) | 

Closes NDX-811

Author: devjiwonchoi

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/call-stack-frame/call-stack-frame.tsx

@@ -84,6 +84,10 @@ export const CALL_STACK_FRAME_STYLES = css`
     border-radius: var(--rounded-lg);
   }
 
+  [data-nextjs-call-stack-frame-ignored]:last-child {
+    margin-bottom: 0;
+  }
+
   [data-nextjs-call-stack-frame] {
     user-select: text;
     display: block;

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/code-frame/code-frame.tsx

@@ -109,18 +109,18 @@ export const CODE_FRAME_STYLES = css`
     font-family: var(--font-stack-monospace);
     font-size: 12px;
     line-height: 16px;
-    margin: var(--next-dialog-row-padding);
-
-    &:has(~ [data-nextjs-call-stack]) {
-      margin-bottom: 0;
-    }
+    margin: var(--size-2) 0;
   }
 
   .code-frame-link,
   .code-frame-pre {
     padding: 12px;
   }
 
+  .code-frame-pre {
+    white-space: pre-wrap;
+  }
+
   .code-frame-header {
     width: 100%;
     cursor: pointer;

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/copy-button/index.tsx

@@ -237,12 +237,10 @@ function CopySuccessIcon() {
   )
 }
 
-// TODO(jiwon): Is not used anymore, should we decouple the styles?
 export const COPY_BUTTON_STYLES = css`
   [data-nextjs-data-runtime-error-copy-button],
   [data-nextjs-data-runtime-error-copy-button]:focus:not(:focus-visible) {
     position: relative;
-    margin-left: var(--size-gap);
     padding: 0;
     border: none;
     background: none;

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

@@ -55,6 +55,7 @@ const styles = css`
     display: flex;
     flex-direction: column;
     position: relative;
+    padding: var(--size-4) var(--size-3);
   }
 
   /* Account for the footer height, when present */
@@ -64,8 +65,7 @@ const styles = css`
 
   [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {
     flex-shrink: 0;
-    padding: var(--next-dialog-row-padding);
-    padding-bottom: 0;
+    margin-bottom: var(--size-2);
   }
 
   [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {

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

@@ -122,19 +122,15 @@ function ChevronUpDown() {
 export const CALL_STACK_STYLES = css`
   .error-overlay-call-stack-container {
     position: relative;
-    padding: var(--size-4) var(--size-3);
-    /* To optically align last item */
-    padding-bottom: 8px;
-    position: relative;
+    margin-top: var(--size-2);
   }
 
   .error-overlay-call-stack-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     min-height: 28px;
-    margin-bottom: var(--size-3);
-    padding: 0 var(--size-2);
+    padding: var(--size-2) var(--size-2) var(--size-3) var(--size-1);
     width: 100%;
   }
 

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-message/error-message.tsx

@@ -20,6 +20,7 @@ export function ErrorMessage({ errorMessage }: ErrorMessageProps) {
 export const styles = css`
   .nextjs__container_errors_desc {
     margin: 0;
+    margin-left: var(--size-1);
     color: var(--color-red-900);
     font-weight: 500;
     font-size: var(--size-font);

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

@@ -264,7 +264,7 @@ export const styles = css`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: var(--size-3);
+    margin-bottom: var(--size-3_5);
   }
   .error-overlay-notes-container {
     padding: 0 var(--size-4);