Left align navigation pills in task details (#1070)
This commit is contained in:
@@ -274,61 +274,59 @@ function TaskDetails() {
|
|||||||
{failureReason}
|
{failureReason}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<div className="flex items-center justify-center">
|
<div className="flex w-fit gap-2 rounded-sm border border-slate-700 p-2">
|
||||||
<div className="inline-flex rounded border bg-muted p-1">
|
<NavLink
|
||||||
<NavLink
|
to="actions"
|
||||||
to="actions"
|
className={({ isActive }) => {
|
||||||
className={({ isActive }) => {
|
return cn(
|
||||||
return cn(
|
"cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
|
||||||
"cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
|
{
|
||||||
{
|
"bg-slate-700": isActive,
|
||||||
"bg-primary-foreground text-foreground": isActive,
|
},
|
||||||
},
|
);
|
||||||
);
|
}}
|
||||||
}}
|
>
|
||||||
>
|
Actions
|
||||||
Actions
|
</NavLink>
|
||||||
</NavLink>
|
<NavLink
|
||||||
<NavLink
|
to="recording"
|
||||||
to="recording"
|
className={({ isActive }) => {
|
||||||
className={({ isActive }) => {
|
return cn(
|
||||||
return cn(
|
"cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
|
||||||
"cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
|
{
|
||||||
{
|
"bg-slate-700": isActive,
|
||||||
"bg-primary-foreground text-foreground": isActive,
|
},
|
||||||
},
|
);
|
||||||
);
|
}}
|
||||||
}}
|
>
|
||||||
>
|
Recording
|
||||||
Recording
|
</NavLink>
|
||||||
</NavLink>
|
<NavLink
|
||||||
<NavLink
|
to="parameters"
|
||||||
to="parameters"
|
className={({ isActive }) => {
|
||||||
className={({ isActive }) => {
|
return cn(
|
||||||
return cn(
|
"cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
|
||||||
"cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
|
{
|
||||||
{
|
"bg-slate-700": isActive,
|
||||||
"bg-primary-foreground text-foreground": isActive,
|
},
|
||||||
},
|
);
|
||||||
);
|
}}
|
||||||
}}
|
>
|
||||||
>
|
Parameters
|
||||||
Parameters
|
</NavLink>
|
||||||
</NavLink>
|
<NavLink
|
||||||
<NavLink
|
to="diagnostics"
|
||||||
to="diagnostics"
|
className={({ isActive }) => {
|
||||||
className={({ isActive }) => {
|
return cn(
|
||||||
return cn(
|
"cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
|
||||||
"cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
|
{
|
||||||
{
|
"bg-slate-700": isActive,
|
||||||
"bg-primary-foreground text-foreground": isActive,
|
},
|
||||||
},
|
);
|
||||||
);
|
}}
|
||||||
}}
|
>
|
||||||
>
|
Diagnostics
|
||||||
Diagnostics
|
</NavLink>
|
||||||
</NavLink>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -28,10 +28,8 @@ function TaskRecording() {
|
|||||||
|
|
||||||
if (taskIsLoading) {
|
if (taskIsLoading) {
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto flex">
|
<div className="h-[450px] w-[800px]">
|
||||||
<div className="h-[450px] w-[800px]">
|
<Skeleton className="h-full" />
|
||||||
<Skeleton className="h-full" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -41,9 +39,7 @@ function TaskRecording() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return recordingURL ? (
|
return recordingURL ? (
|
||||||
<div className="mx-auto flex">
|
<video width={800} height={450} src={recordingURL} controls />
|
||||||
<video width={800} height={450} src={recordingURL} controls />
|
|
||||||
</div>
|
|
||||||
) : (
|
) : (
|
||||||
<div>No recording available for this task</div>
|
<div>No recording available for this task</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user