Improve screenshot experience in new task ui (#408)

skyvern-frontend/src/router.tsx

@@ -8,6 +8,9 @@ import { SettingsPageLayout } from "./routes/settings/SettingsPageLayout";
 import { TaskDetails } from "./routes/tasks/detail/TaskDetails";
 import { CreateNewTaskLayout } from "./routes/tasks/create/CreateNewTaskLayout";
 import { CreateNewTaskFormPage } from "./routes/tasks/create/CreateNewTaskFormPage";
+import { TaskActions } from "./routes/tasks/detail/TaskActions";
+import { TaskRecording } from "./routes/tasks/detail/TaskRecording";
+import { TaskParameters } from "./routes/tasks/detail/TaskParameters";
 
 const router = createBrowserRouter([
   {
@@ -29,6 +32,24 @@ const router = createBrowserRouter([
           {
             path: ":taskId",
             element: <TaskDetails />,
+            children: [
+              {
+                index: true,
+                element: <Navigate to="actions" />,
+              },
+              {
+                path: "actions",
+                element: <TaskActions />,
+              },
+              {
+                path: "recording",
+                element: <TaskRecording />,
+              },
+              {
+                path: "parameters",
+                element: <TaskParameters />,
+              },
+            ],
           },
         ],
       },

skyvern-frontend/src/routes/tasks/detail/ActionScreenshot.tsx

@@ -42,7 +42,7 @@ function ActionScreenshot({ stepId, index }: Props) {
   }
 
   return screenshot ? (
-    <figure className="max-h-[400px] flex flex-col mx-auto items-center gap-2 overflow-hidden">
+    <figure className="max-w-full flex flex-col mx-auto items-center gap-2 overflow-hidden">
       <ZoomableImage src={getImageURL(screenshot)} alt="llm-screenshot" />
     </figure>
   ) : (

skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx

@@ -23,7 +23,7 @@ function TaskActions() {
 
   return (
     <div className="flex gap-2">
-      <div className="w-3/4 h-[40rem] border rounded">
+      <div className="w-3/4 border rounded">
         <div className="p-4">
           <InputReasoningCard
             input={activeAction.input}
@@ -32,12 +32,10 @@ function TaskActions() {
           />
         </div>
         <div className="p-4">
-          <div className="p-4">
+          <ActionScreenshot
-            <ActionScreenshot
+            stepId={activeAction.stepId}
-              stepId={activeAction.stepId}
+            index={activeAction.index}
-              index={activeAction.index}
+          />
-            />
-          </div>
         </div>
       </div>
       <ScrollableActionList