From 82ea39f7c4fea72b2b640852c7f7518dbe79697b Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Wed, 13 Nov 2024 06:11:20 -0800
Subject: [PATCH] Avoid overflow in running workflow sidebar (#1183)

---
 .../src/routes/workflows/WorkflowRun.tsx             | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
index 41ad821b..01a73be4 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
@@ -365,7 +365,7 @@ function WorkflowRun() {
           <div className="w-3/4 shrink-0">
             <AspectRatio ratio={16 / 9}>{getStream()}</AspectRatio>
           </div>
-          <div className="flex w-full flex-col gap-4 rounded-md bg-slate-elevation1 p-4">
+          <div className="flex w-full min-w-0 flex-col gap-4 rounded-md bg-slate-elevation1 p-4">
             <header className="text-lg">Current Task</header>
             {workflowRunIsLoading || !currentRunningTask ? (
               <div>Waiting for a task to start...</div>
@@ -377,7 +377,10 @@ function WorkflowRun() {
                 </div>
                 <div className="flex gap-2 rounded-sm bg-slate-elevation3 p-2">
                   <Label className="text-sm text-slate-400">URL</Label>
-                  <span className="text-sm">
+                  <span
+                    className="truncate text-sm"
+                    title={currentRunningTask.request.url}
+                  >
                     {currentRunningTask.request.url}
                   </span>
                 </div>
@@ -389,7 +392,10 @@ function WorkflowRun() {
                 </div>
                 <div className="flex gap-2 rounded-sm bg-slate-elevation3 p-2">
                   <Label className="text-sm text-slate-400">Created</Label>
-                  <span className="text-sm">
+                  <span
+                    className="truncate text-sm"
+                    title={basicLocalTimeFormat(currentRunningTask.created_at)}
+                  >
                     {currentRunningTask &&
                       timeFormatWithShortDate(currentRunningTask.created_at)}
                   </span>