Left align navigation pills in task details (#1070)

This commit is contained in:
Shuchang Zheng
2024-10-28 05:08:25 -07:00
committed by GitHub
parent 9d93280302
commit 3fbd1832ea
2 changed files with 56 additions and 62 deletions

View File

@@ -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>

View File

@@ -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>
);