From 3fbd1832eaa7ac1a4c01dbd25ef263dcb1a02937 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Mon, 28 Oct 2024 05:08:25 -0700
Subject: [PATCH] Left align navigation pills in task details (#1070)

---
 .../src/routes/tasks/detail/TaskDetails.tsx   | 108 +++++++++---------
 .../src/routes/tasks/detail/TaskRecording.tsx |  10 +-
 2 files changed, 56 insertions(+), 62 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
index 48986f4e..625dfe42 100644
--- a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
@@ -274,61 +274,59 @@ function TaskDetails() {
           {failureReason}
         </>
       )}
-      <div className="flex items-center justify-center">
-        <div className="inline-flex rounded border bg-muted p-1">
-          <NavLink
-            to="actions"
-            className={({ isActive }) => {
-              return cn(
-                "cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
-                {
-                  "bg-primary-foreground text-foreground": isActive,
-                },
-              );
-            }}
-          >
-            Actions
-          </NavLink>
-          <NavLink
-            to="recording"
-            className={({ isActive }) => {
-              return cn(
-                "cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
-                {
-                  "bg-primary-foreground text-foreground": isActive,
-                },
-              );
-            }}
-          >
-            Recording
-          </NavLink>
-          <NavLink
-            to="parameters"
-            className={({ isActive }) => {
-              return cn(
-                "cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
-                {
-                  "bg-primary-foreground text-foreground": isActive,
-                },
-              );
-            }}
-          >
-            Parameters
-          </NavLink>
-          <NavLink
-            to="diagnostics"
-            className={({ isActive }) => {
-              return cn(
-                "cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
-                {
-                  "bg-primary-foreground text-foreground": isActive,
-                },
-              );
-            }}
-          >
-            Diagnostics
-          </NavLink>
-        </div>
+      <div className="flex w-fit gap-2 rounded-sm border border-slate-700 p-2">
+        <NavLink
+          to="actions"
+          className={({ isActive }) => {
+            return cn(
+              "cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
+              {
+                "bg-slate-700": isActive,
+              },
+            );
+          }}
+        >
+          Actions
+        </NavLink>
+        <NavLink
+          to="recording"
+          className={({ isActive }) => {
+            return cn(
+              "cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
+              {
+                "bg-slate-700": isActive,
+              },
+            );
+          }}
+        >
+          Recording
+        </NavLink>
+        <NavLink
+          to="parameters"
+          className={({ isActive }) => {
+            return cn(
+              "cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
+              {
+                "bg-slate-700": isActive,
+              },
+            );
+          }}
+        >
+          Parameters
+        </NavLink>
+        <NavLink
+          to="diagnostics"
+          className={({ isActive }) => {
+            return cn(
+              "cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
+              {
+                "bg-slate-700": isActive,
+              },
+            );
+          }}
+        >
+          Diagnostics
+        </NavLink>
       </div>
       <Outlet />
     </div>
diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx
index 4ebf0076..05bb8b98 100644
--- a/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx
@@ -28,10 +28,8 @@ function TaskRecording() {
 
   if (taskIsLoading) {
     return (
-      <div className="mx-auto flex">
-        <div className="h-[450px] w-[800px]">
-          <Skeleton className="h-full" />
-        </div>
+      <div className="h-[450px] w-[800px]">
+        <Skeleton className="h-full" />
       </div>
     );
   }
@@ -41,9 +39,7 @@ function TaskRecording() {
   }
 
   return recordingURL ? (
-    <div className="mx-auto flex">
-      <video width={800} height={450} src={recordingURL} controls />
-    </div>
+    <video width={800} height={450} src={recordingURL} controls />
   ) : (
     <div>No recording available for this task</div>
   );