Repository: vercel/next.js
Pull request:  [dev-overlay] Fix highlighted line cut off on scroll

Tiny PR to fix the error highlight not spanning full width of the container. 



https://github.com/user-attachments/assets/595b7184-e325-4b24-afdb-7683c04f0999



---
Closes NDX-1025

Changed files:
filename: packages/next/src/client/components/react-dev-overlay/ui/components/code-frame/code-frame.tsx
patch: @@ -62,40 +62,42 @@ export function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {
         </p>
       </div>
       <pre className="code-frame-pre">
-        {parsedLineStates.map(({ line, parsedLine }, lineIndex) => {
-          const { lineNumber, isErroredLine } = parsedLine
-
-          const lineNumberProps: Record<string, string | boolean> = {}
-          if (lineNumber) {
-            lineNumberProps['data-nextjs-codeframe-line'] = lineNumber
-          }
-          if (isErroredLine) {
-            lineNumberProps['data-nextjs-codeframe-line--errored'] = true
-          }
-
-          return (
-            <div key={`line-${lineIndex}`} {...lineNumberProps}>
-              {line.map((entry, entryIndex) => (
-                <span
-                  key={`frame-${entryIndex}`}
-                  style={{
-                    color: entry.fg ? `var(--color-${entry.fg})` : undefined,
-                    ...(entry.decoration === 'bold'
-                      ? // TODO(jiwon): This used to be 800, but the symbols like `─┬─` are
-                        // having longer width than expected on Geist Mono font-weight
-                        // above 600, hence a temporary fix is to use 500 for bold.
-                        { fontWeight: 500 }
-                      : entry.decoration === 'italic'
-                        ? { fontStyle: 'italic' }
-                        : undefined),
-                  }}
-                >
-                  {entry.content}
-                </span>
-              ))}
-            </div>
-          )
-        })}
+        <div className="code-frame-lines">
+          {parsedLineStates.map(({ line, parsedLine }, lineIndex) => {
+            const { lineNumber, isErroredLine } = parsedLine
+
+            const lineNumberProps: Record<string, string | boolean> = {}
+            if (lineNumber) {
+              lineNumberProps['data-nextjs-codeframe-line'] = lineNumber
+            }
+            if (isErroredLine) {
+              lineNumberProps['data-nextjs-codeframe-line--errored'] = true
+            }
+
+            return (
+              <div key={`line-${lineIndex}`} {...lineNumberProps}>
+                {line.map((entry, entryIndex) => (
+                  <span
+                    key={`frame-${entryIndex}`}
+                    style={{
+                      color: entry.fg ? `var(--color-${entry.fg})` : undefined,
+                      ...(entry.decoration === 'bold'
+                        ? // TODO(jiwon): This used to be 800, but the symbols like `─┬─` are
+                          // having longer width than expected on Geist Mono font-weight
+                          // above 600, hence a temporary fix is to use 500 for bold.
+                          { fontWeight: 500 }
+                        : entry.decoration === 'italic'
+                          ? { fontStyle: 'italic' }
+                          : undefined),
+                    }}
+                  >
+                    {entry.content}
+                  </span>
+                ))}
+              </div>
+            )
+          })}
+        </div>
       </pre>
     </div>
   )
@@ -131,6 +133,10 @@ export const CODE_FRAME_STYLES = `
     flex-shrink: 0;
   }
 
+  .code-frame-lines {
+    min-width: max-content;
+  }
+
   .code-frame-link [data-text] {
     display: inline-flex;
     text-align: left;

filename: packages/next/src/client/components/react-dev-overlay/ui/components/terminal/terminal.tsx
patch: @@ -113,31 +113,33 @@ export const Terminal: React.FC<TerminalProps> = function Terminal({
         </div>
       </div>
       <pre className="code-frame-pre">
-        {decoded.map((entry, index) => (
-          <span
-            key={`terminal-entry-${index}`}
-            style={{
-              color: entry.fg ? `var(--color-${entry.fg})` : undefined,
-              ...(entry.decoration === 'bold'
-                ? // TODO(jiwon): This used to be 800, but the symbols like `─┬─` are
-                  // having longer width than expected on Geist Mono font-weight
-                  // above 600, hence a temporary fix is to use 500 for bold.
-                  { fontWeight: 500 }
-                : entry.decoration === 'italic'
-                  ? { fontStyle: 'italic' }
-                  : undefined),
-            }}
-          >
-            <HotlinkedText text={entry.content} />
-          </span>
-        ))}
-        {importTraceFiles.map((importTraceFile) => (
-          <EditorLink
-            isSourceFile={false}
-            key={importTraceFile}
-            file={importTraceFile}
-          />
-        ))}
+        <div className="code-frame-lines">
+          {decoded.map((entry, index) => (
+            <span
+              key={`terminal-entry-${index}`}
+              style={{
+                color: entry.fg ? `var(--color-${entry.fg})` : undefined,
+                ...(entry.decoration === 'bold'
+                  ? // TODO(jiwon): This used to be 800, but the symbols like `─┬─` are
+                    // having longer width than expected on Geist Mono font-weight
+                    // above 600, hence a temporary fix is to use 500 for bold.
+                    { fontWeight: 500 }
+                  : entry.decoration === 'italic'
+                    ? { fontStyle: 'italic' }
+                    : undefined),
+              }}
+            >
+              <HotlinkedText text={entry.content} />
+            </span>
+          ))}
+          {importTraceFiles.map((importTraceFile) => (
+            <EditorLink
+              isSourceFile={false}
+              key={importTraceFile}
+              file={importTraceFile}
+            />
+          ))}
+        </div>
       </pre>
     </div>
   )