diff --git a/ui/src/components/artifacts/v1/ArtifactFront.tsx b/ui/src/components/artifacts/v1/ArtifactFront.tsx index ea118d5c6c1..51a12c40023 100644 --- a/ui/src/components/artifacts/v1/ArtifactFront.tsx +++ b/ui/src/components/artifacts/v1/ArtifactFront.tsx @@ -35,16 +35,17 @@ export function ArtifactFront({ ); case "media": return ( - { - onOwnError(); - onMediaError?.(event); - }} - style={style} - /> +
+ { + onOwnError(); + onMediaError?.(event); + }} + /> +
); case "media-fallback": return ( diff --git a/ui/src/components/artifacts/v1/ArtifactTile.test.tsx b/ui/src/components/artifacts/v1/ArtifactTile.test.tsx index b6f0f00326c..34f00e3db31 100644 --- a/ui/src/components/artifacts/v1/ArtifactTile.test.tsx +++ b/ui/src/components/artifacts/v1/ArtifactTile.test.tsx @@ -64,6 +64,26 @@ describe("the Artifacts page tiles", () => { const print = container.querySelector("[data-artifact-print]"); expect(print?.style.width).toBe("245px"); expect(print?.style.height).toBe("163.33px"); + const front = container.querySelector("[data-artifact-front]"); + expect(front).not.toBeNull(); + expect(front?.contains(print)).toBe(true); + expect(front?.style.position).toBe("absolute"); + expect(print?.style.position).toBe(""); + }); + + it("gives a single picture the same hover-lift hook as a sheet", () => { + act(() => + root.render( + + + + + , + ), + ); + const front = container.querySelector("[data-artifact-front]"); + expect(front).not.toBeNull(); + expect(front?.querySelector("[data-artifact-print]")).not.toBeNull(); }); it("plays a video's own stream in the print when it has no poster, never an image tag on the video", () => {