Fix transcript actions on touch devices (#4161)

This commit is contained in:
Wes
2026-06-16 17:06:14 +08:00
committed by GitHub
parent 4f1797598e
commit 3aaca155e7
2 changed files with 21 additions and 5 deletions

View File

@@ -69,4 +69,21 @@ describe("ActiveTaskRow", () => {
expect(screen.getByText("View transcript")).toBeInTheDocument();
expect(mockState.taskMessagesOptions).not.toHaveBeenCalled();
});
it("does not make transcript actions depend on hover-only rendering", () => {
renderWithI18n(<ActiveTaskRow task={makeTask()} issueId="issue-1" />);
const transcriptButton = screen.getByRole("button", { name: "View transcript" });
const status = screen.getByText("5m 04s");
expect(status.parentElement?.className).toContain("flex h-7");
expect(status.parentElement?.className).toContain(
"[@media(hover:hover)]:group-hover/execution-log-row:hidden",
);
expect(transcriptButton.parentElement?.className).toContain("flex h-7");
expect(transcriptButton.parentElement?.className).toContain("[@media(hover:hover)]:hidden");
expect(transcriptButton.parentElement?.className).toContain(
"[@media(hover:hover)]:group-hover/execution-log-row:flex",
);
});
});

View File

@@ -466,7 +466,7 @@ function RowStatus({
return (
<div
title={title}
className="flex h-7 shrink-0 items-center justify-end gap-1 overflow-hidden whitespace-nowrap text-xs group-hover/execution-log-row:hidden"
className="flex h-7 shrink-0 items-center justify-end gap-1 overflow-hidden whitespace-nowrap text-xs [@media(hover:hover)]:group-hover/execution-log-row:hidden"
>
{children}
</div>
@@ -486,12 +486,11 @@ function TaskStatusIcon({ status }: { status: AgentTask["status"] }) {
}
}
// Action slot — hidden by default, replaces the status column in place on
// hover. No absolute/gradient needed: the status is removed (not covered),
// so nothing shows through underneath.
// Action slot — visible by default for touch devices. On hover-capable
// surfaces, it replaces the status column in place on row hover.
function RowActions({ children }: { children: React.ReactNode }) {
return (
<div className="hidden h-7 items-center gap-0.5 group-hover/execution-log-row:flex">
<div className="flex h-7 items-center gap-0.5 [@media(hover:hover)]:hidden [@media(hover:hover)]:group-hover/execution-log-row:flex">
{children}
</div>
);