From 3e0bec3f524505722bd19a14ea253bd5b2e4fa1c Mon Sep 17 00:00:00 2001
From: Christopher Tso <christso@gmail.com>
Date: Thu, 9 Apr 2026 11:08:31 +0000
Subject: [PATCH] fix(studio): truncate long run ID on job detail page

Prevents the studio run ID from wrapping to a second line on narrow
viewports, keeping the status badge on the same row.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 apps/studio/src/routes/jobs/$runId.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/studio/src/routes/jobs/$runId.tsx b/apps/studio/src/routes/jobs/$runId.tsx
index 4a5fceae7..600670e5b 100644
--- a/apps/studio/src/routes/jobs/$runId.tsx
+++ b/apps/studio/src/routes/jobs/$runId.tsx
@@ -56,9 +56,9 @@ function JobDetailPage() {
       <BackLink />
 
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-xl font-semibold text-white">{runId}</h1>
+      <div className="flex min-w-0 items-center justify-between gap-4">
+        <div className="min-w-0">
+          <h1 className="truncate font-mono text-base font-semibold text-white">{runId}</h1>
           <p className="mt-0.5 text-xs text-gray-500">
             Started {new Date(status.started_at).toLocaleString()}
             {status.finished_at && (
@@ -74,7 +74,7 @@ function JobDetailPage() {
             )}
           </p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex flex-shrink-0 items-center gap-2">
           <span className={`text-sm font-medium ${statusColor}`}>
             {status.status.charAt(0).toUpperCase() + status.status.slice(1)}
           </span>