From aa5d99fd48149b60cb91a2ccd6cf59f2e171b292 Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Fri, 10 Jan 2025 03:04:03 +0900
Subject: [PATCH] no |

---
 .../CodeFrame/CodeFrame.stories.tsx           | 30 ++-----------------
 .../components/CodeFrame/CodeFrame.tsx        |  5 +++-
 2 files changed, 7 insertions(+), 28 deletions(-)

diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/CodeFrame/CodeFrame.stories.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/CodeFrame/CodeFrame.stories.tsx
index e9b4934352a0d1..275b43c8f1bd5b 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/CodeFrame/CodeFrame.stories.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/CodeFrame/CodeFrame.stories.tsx
@@ -25,35 +25,11 @@ const baseStackFrame = {
 export const SimpleCodeFrame: Story = {
   args: {
     stackFrame: baseStackFrame,
-    codeFrame: `   8 | function MyComponent() {
-   9 |   return (
-> 10 |     <div>Hello World</div>
+    codeFrame: `   8 | \u001b[31mfunction\u001b[39m \u001b[31mMyComponent\u001b[39m() {
+   9 |   \u001b[31mreturn\u001b[39m (
+> 10 |     <\u001b[31mdiv\u001b[39m>Hello \u001b[31mWorld\u001b[39m</\u001b[31mdiv\u001b[39m>
      |     ^
   11 |   )
   12 | }`,
   },
 }
-
-export const WithSyntaxHighlighting: Story = {
-  args: {
-    stackFrame: baseStackFrame,
-    codeFrame: `   8 | function MyComponent() {
-   9 |   return (
-> 10 |     \u001b[31m<div>\u001b[39mHello World\u001b[31m</div>\u001b[39m
-     |     ^
-  11 |   )
-  12 | }`,
-  },
-}
-
-export const LongIndentation: Story = {
-  args: {
-    stackFrame: baseStackFrame,
-    codeFrame: `   8 |     function deeplyNested() {
-   9 |         return (
-> 10 |             <div>
-     |             ^
-  11 |                 Deeply Nested Content
-  12 |             </div>`,
-  },
-}
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/CodeFrame/CodeFrame.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/CodeFrame/CodeFrame.tsx
index 31eafaa669bccb..4f24dbbef15f71 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/CodeFrame/CodeFrame.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/CodeFrame/CodeFrame.tsx
@@ -35,7 +35,9 @@ export function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {
         .map((line, a) =>
           ~(a = line.indexOf('|'))
             ? line.substring(0, a) +
-              line.substring(a).replace(`^\\ {${miniLeadingSpacesLength}}`, '')
+              line
+                .substring(a + 1)
+                .replace(`^\\ {${miniLeadingSpacesLength}}`, '')
             : line
         )
         .join('\n')
@@ -113,6 +115,7 @@ export const CODE_FRAME_STYLES = css`
 
   .code-frame-header {
     border-top: 1px solid var(--color-gray-400);
+    border-bottom: 1px solid var(--color-gray-400);
   }
 
   [data-nextjs-codeframe]::selection,