Fix file path overflowing in error popup (vercel#27575)

## Bug - [x] Related issues linked using `fixes #number` fixes vercel#27170 ### Before ![before](https://user-images.githubusercontent.com/29579847/127415669-8eecf6e3-aba0-408f-9af5-0014da7bb3ad.png) ### After ![after](https://user-images.githubusercontent.com/29579847/127415724-c5082e06-6a68-4f80-828b-ed8ef939b9fb.png)
natew · Feb 16, 2022 · 02fa359 · 02fa359
1 parent 198dc02
commit 02fa359
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 36 deletions.
diff --git a/packages/react-dev-overlay/src/internal/components/CodeFrame/CodeFrame.tsx b/packages/react-dev-overlay/src/internal/components/CodeFrame/CodeFrame.tsx
@@ -63,30 +63,31 @@ export const CodeFrame: React.FC<CodeFrameProps> = function CodeFrame({
   // TODO: make the caret absolute
   return (
     <div data-nextjs-codeframe>
-      <p
-        role="link"
-        onClick={open}
-        tabIndex={1}
-        title="Click to open in your editor"
-      >
-        <span>
-          {getFrameSource(stackFrame)} @ {stackFrame.methodName}
-        </span>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
+      <div>
+        <p
+          role="link"
+          onClick={open}
+          tabIndex={1}
+          title="Click to open in your editor"
         >
-          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
-          <polyline points="15 3 21 3 21 9"></polyline>
-          <line x1="10" y1="14" x2="21" y2="3"></line>
-        </svg>
-      </p>
-      <hr />
+          <span>
+            {getFrameSource(stackFrame)} @ {stackFrame.methodName}
+          </span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+            <polyline points="15 3 21 3 21 9"></polyline>
+            <line x1="10" y1="14" x2="21" y2="3"></line>
+          </svg>
+        </p>
+      </div>
       <pre>
         {decoded.map((entry, index) => (
           <span

diff --git a/packages/react-dev-overlay/src/internal/components/CodeFrame/styles.tsx b/packages/react-dev-overlay/src/internal/components/CodeFrame/styles.tsx
@@ -2,6 +2,7 @@ import { noop as css } from '../../helpers/noop-template'
 
 const styles = css`
   [data-nextjs-codeframe] {
+    overflow: auto;
     border-radius: var(--size-gap-half);
     background-color: var(--color-ansi-bg);
     color: var(--color-ansi-fg);
@@ -21,31 +22,31 @@ const styles = css`
     padding: calc(var(--size-gap) + var(--size-gap-half))
       calc(var(--size-gap-double) + var(--size-gap-half));
   }
-  [data-nextjs-codeframe] > hr {
-    margin: 0;
-    padding: 0;
-
-    border: none;
-    border-style: solid;
-    border-width: 0;
-    border-bottom-width: 1px;
-    border-color: var(--color-ansi-bright-black);
+  [data-nextjs-codeframe] > div {
+    display: inline-block;
+    width: auto;
+    min-width: 100%;
+    border-bottom: 1px solid var(--color-ansi-bright-black);
   }
-
-  [data-nextjs-codeframe] > p {
+  [data-nextjs-codeframe] > div > p {
     display: flex;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
+    margin: 0;
   }
-  [data-nextjs-codeframe] > p:hover {
+  [data-nextjs-codeframe] > div > p:hover {
     text-decoration: underline dotted;
   }
-  [data-nextjs-codeframe] > p > svg {
+  [data-nextjs-codeframe] div > p > svg {
     width: auto;
     height: 1em;
     margin-left: 8px;
   }
+  [data-nextjs-codeframe] div > pre {
+    overflow: hidden;
+    display: inline-block;
+  }
 `
 
 export { styles }