Left align navigation pills in task details (#1070)

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

@@ -274,15 +274,14 @@ function TaskDetails() {
           {failureReason}
         </>
       )}
-      <div className="flex items-center justify-center">
-        <div className="inline-flex rounded border bg-muted p-1">
+      <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-md px-2 py-1 text-muted-foreground",
+              "cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
               {
-                  "bg-primary-foreground text-foreground": isActive,
+                "bg-slate-700": isActive,
               },
             );
           }}
@@ -293,9 +292,9 @@ function TaskDetails() {
           to="recording"
           className={({ isActive }) => {
             return cn(
-                "cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
+              "cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
               {
-                  "bg-primary-foreground text-foreground": isActive,
+                "bg-slate-700": isActive,
               },
             );
           }}
@@ -306,9 +305,9 @@ function TaskDetails() {
           to="parameters"
           className={({ isActive }) => {
             return cn(
-                "cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
+              "cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
               {
-                  "bg-primary-foreground text-foreground": isActive,
+                "bg-slate-700": isActive,
               },
             );
           }}
@@ -319,9 +318,9 @@ function TaskDetails() {
           to="diagnostics"
           className={({ isActive }) => {
             return cn(
-                "cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
+              "cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
               {
-                  "bg-primary-foreground text-foreground": isActive,
+                "bg-slate-700": isActive,
               },
             );
           }}
@@ -329,7 +328,6 @@ function TaskDetails() {
           Diagnostics
         </NavLink>
       </div>
-      </div>
       <Outlet />
     </div>
   );

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

@@ -28,11 +28,9 @@ function TaskRecording() {
 
   if (taskIsLoading) {
     return (
-      <div className="mx-auto flex">
       <div className="h-[450px] w-[800px]">
         <Skeleton className="h-full" />
       </div>
-      </div>
     );
   }
 
@@ -41,9 +39,7 @@ function TaskRecording() {
   }
 
   return recordingURL ? (
-    <div className="mx-auto flex">
     <video width={800} height={450} src={recordingURL} controls />
-    </div>
   ) : (
     <div>No recording available for this task</div>
   );