[devtools] Preserve full code frames in browser overlay

packages/next/src/next-devtools/dev-overlay/components/code-frame/code-frame.tsx

@@ -211,9 +211,11 @@ export const CODE_FRAME_STYLES = `
     margin-left: auto;
   }
 
-  [data-nextjs-codeframe] div > pre {
-    overflow: hidden;
-    display: inline-block;
+  .code-frame-pre {
+    overflow-x: auto;
+    overflow-y: hidden;
+    display: block;
+    max-width: 100%;
   }
 
   [data-nextjs-codeframe] svg {

packages/next/src/next-devtools/server/shared.ts

@@ -25,6 +25,13 @@ export interface OriginalStackFrameResponse {
   originalCodeFrame: string | null
 }
 
+type CodeFrameRenderOptions = {
+  colors?: boolean
+  maxWidth?: number
+}
+
+export const DEVTOOLS_CODE_FRAME_MAX_WIDTH = 1000
+
 export function ignoreListAnonymousStackFramesIfSandwiched(
   responses: OriginalStackFramesResponse
 ): void {
@@ -65,12 +72,21 @@ export function ignoreListAnonymousStackFramesIfSandwiched(
 export function getOriginalCodeFrame(
   frame: IgnorableStackFrame,
   source: string | null,
-  colors: boolean = process.stdout.isTTY
+  colorsOrOptions: boolean | CodeFrameRenderOptions = process.stdout?.isTTY ??
+    false
 ): string | null {
   if (!source || frame.line1 == null) {
     return null
   }
 
+  const { colors, maxWidth } =
+    typeof colorsOrOptions === 'boolean'
+      ? { colors: colorsOrOptions, maxWidth: undefined }
+      : {
+          colors: colorsOrOptions.colors ?? process.stdout?.isTTY ?? false,
+          maxWidth: colorsOrOptions.maxWidth,
+        }
+
   return (
     codeFrameColumns(
       source,
@@ -80,7 +96,10 @@ export function getOriginalCodeFrame(
           column: frame.column1 ?? undefined,
         },
       },
-      { color: colors }
+      {
+        color: colors,
+        maxWidth,
+      }
     ) ?? null
   )
 }

packages/next/src/server/dev/middleware-turbopack.ts

@@ -1,5 +1,6 @@
 import type { IncomingMessage, ServerResponse } from 'http'
 import {
+  DEVTOOLS_CODE_FRAME_MAX_WIDTH,
   getOriginalCodeFrame,
   ignoreListAnonymousStackFramesIfSandwiched,
   type IgnorableStackFrame,
@@ -322,7 +323,11 @@ async function createOriginalStackFrame(
     },
     get originalCodeFrame() {
       if (originalCodeFrame === undefined) {
-        originalCodeFrame = getOriginalCodeFrame(tracedFrame, traced.source)
+        originalCodeFrame = getOriginalCodeFrame(tracedFrame, traced.source, {
+          // The overlay renders in a browser with horizontal scrolling,
+          // so don't truncate lines to the server's terminal width.
+          maxWidth: DEVTOOLS_CODE_FRAME_MAX_WIDTH,
+        })
       }
       return originalCodeFrame
     },

packages/next/src/server/dev/middleware-webpack.ts

@@ -12,6 +12,7 @@ import {
 } from '../lib/source-maps'
 import { openFileInEditor } from '../../next-devtools/server/launch-editor'
 import {
+  DEVTOOLS_CODE_FRAME_MAX_WIDTH,
   getOriginalCodeFrame,
   ignoreListAnonymousStackFramesIfSandwiched,
   type StackFrame,
@@ -261,7 +262,11 @@ export async function createOriginalStackFrame({
     originalStackFrame: traced,
     get originalCodeFrame() {
       if (originalCodeFrame === undefined) {
-        originalCodeFrame = getOriginalCodeFrame(traced, sourceContent)
+        originalCodeFrame = getOriginalCodeFrame(traced, sourceContent, {
+          // The overlay renders in a browser with horizontal scrolling,
+          // so don't truncate lines to the server's terminal width.
+          maxWidth: DEVTOOLS_CODE_FRAME_MAX_WIDTH,
+        })
       }
       return originalCodeFrame
     },