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} {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>

View File

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