Make alignment more consitent

packages/bun-error/bun-error.css

@@ -3,6 +3,7 @@
   --bun-error-monospace: ui-monospace, Menlo, Monaco, "Cascadia Mono",
     "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace",
     "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+  --bun-error-width: 512px;
 }
 
 :host a {
@@ -21,7 +22,7 @@
   border: inset 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 17px;
   background-color: rgba(255, 255, 255, 0.92);
-  width: 512px;
+  width: var(--bun-error-width);
 
   position: fixed;
   top: 120px;
@@ -363,10 +364,13 @@
 }
 
 .BunError-StackFrame-link {
+  text-align: right;
 }
 
 .BunError-StackFrame-link-content {
   display: flex;
+  justify-content: flex-end;
+  text-align: right;
   gap: 0.25ch;
   white-space: nowrap;
 }
@@ -375,11 +379,20 @@
   display: table-row;
 }
 
+.BunError-StackFrame:hover {
+  border-left-color: #5865f2;
+}
+
 .BunError-StackFrame-identifier {
   padding-right: 18px;
   font-size: 0.8em;
   font-family: var(--bun-error-monospace);
   letter-spacing: 0.49px;
+  width: var(--max-length, auto);
+  max-width: 48ch;
+  white-space: nowrap;
+  text-overflow: clip;
+  overflow: hidden;
 }
 
 .BunError-error-message--mono {
@@ -412,3 +425,8 @@
 
   background-color: rgb(244, 244, 244);
 }
+
+.BunError-StackFrames-container {
+  overflow-x: auto;
+  max-width: var(--bun-error-width);
+}

packages/bun-error/index.tsx

@@ -692,13 +692,25 @@ const StackFrameIdentifier = ({
   }
 };
 
+const getNativeStackFrameIdentifier = (frame) => {
+  const { file, function_name: functionName, scope } = frame;
+
+  return StackFrameIdentifier({
+    functionName,
+    scope,
+    markdown: false,
+  });
+};
+
 const NativeStackFrame = ({
   frame,
   isTop,
+  maxLength,
   urlBuilder,
 }: {
   frame: StackFrame;
   isTop: boolean;
+  maxLength: number;
 }) => {
   const { cwd } = useContext(ErrorGroupContext);
   const {
@@ -717,8 +729,9 @@ const NativeStackFrame = ({
       <div
         title={StackFrameScope[scope]}
         className="BunError-StackFrame-identifier"
+        style={{ "--max-length": `${maxLength}ch` }}
       >
-        <StackFrameIdentifier functionName={functionName} scope={scope} />
+        {getNativeStackFrameIdentifier(frame)}
       </div>
 
       <a
@@ -745,13 +758,31 @@ const NativeStackFrame = ({
 
 const NativeStackFrames = ({ frames, urlBuilder }) => {
   const items = new Array(frames.length);
+  var maxLength = 0;
+
   for (let i = 0; i < frames.length; i++) {
-    items[i] = (
-      <NativeStackFrame urlBuilder={urlBuilder} key={i} frame={frames[i]} />
+    maxLength = Math.max(
+      getNativeStackFrameIdentifier(frames[i]).length,
+      maxLength
     );
   }
 
-  return <div className="BunError-StackFrames">{items}</div>;
+  for (let i = 0; i < frames.length; i++) {
+    items[i] = (
+      <NativeStackFrame
+        maxLength={maxLength}
+        urlBuilder={urlBuilder}
+        key={i}
+        frame={frames[i]}
+      />
+    );
+  }
+
+  return (
+    <div className="BunError-StackFrames-container">
+      <div className="BunError-StackFrames">{items}</div>
+    </div>
+  );
 };
 
 const NativeStackTrace = ({

packages/bun-error/package.json

@@ -13,5 +13,8 @@
     "preact-compat": "^3.19.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.39"
   }
 }