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,15 +274,14 @@ 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-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" to="recording"
className={({ isActive }) => { className={({ isActive }) => {
return cn( 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" to="parameters"
className={({ isActive }) => { className={({ isActive }) => {
return cn( 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" to="diagnostics"
className={({ isActive }) => { className={({ isActive }) => {
return cn( 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 Diagnostics
</NavLink> </NavLink>
</div> </div>
</div>
<Outlet /> <Outlet />
</div> </div>
); );

View File

@@ -28,11 +28,9 @@ 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>
); );