[dev-overlay] sync style diffs with new design

Author: devjiwonchoi

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: 8px 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/dialog/styles.ts

@@ -55,6 +55,7 @@ const styles = css`
     display: flex;
     flex-direction: column;
     position: relative;
+    padding: 16px 12px;
   }
 
   /* 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: 8px;
   }
 
   [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: 8px;
   }
 
   .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: 8px 8px 12px 4px;
     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: 4px;
     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);