story-kit: merge 237_bug_work_item_titles_render_too_large_in_expanded_view

frontend/src/components/WorkItemDetailPanel.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WorkItemDetailPanel } from "./WorkItemDetailPanel";
+
+vi.mock("../api/client", () => ({
+	api: {
+		getWorkItemContent: vi.fn().mockResolvedValue({
+			content: "# Big Title\n\nSome content here.",
+			stage: "current",
+			name: "Big Title Story",
+		}),
+	},
+}));
+
+describe("WorkItemDetailPanel", () => {
+	it("renders the story name in the header", async () => {
+		render(<WorkItemDetailPanel storyId="237_bug_test" onClose={() => {}} />);
+		await waitFor(() => {
+			expect(screen.getByTestId("detail-panel-title")).toHaveTextContent(
+				"Big Title Story",
+			);
+		});
+	});
+
+	it("shows loading state initially", () => {
+		render(<WorkItemDetailPanel storyId="237_bug_test" onClose={() => {}} />);
+		expect(screen.getByTestId("detail-panel-loading")).toBeInTheDocument();
+	});
+
+	it("calls onClose when close button is clicked", async () => {
+		const onClose = vi.fn();
+		render(<WorkItemDetailPanel storyId="237_bug_test" onClose={onClose} />);
+		const closeButton = screen.getByTestId("detail-panel-close");
+		closeButton.click();
+		expect(onClose).toHaveBeenCalledTimes(1);
+	});
+
+	it("renders markdown headings with constrained inline font size", async () => {
+		render(<WorkItemDetailPanel storyId="237_bug_test" onClose={() => {}} />);
+		await waitFor(() => {
+			const content = screen.getByTestId("detail-panel-content");
+			const h1 = content.querySelector("h1");
+			expect(h1).not.toBeNull();
+			// Headings must have a constrained fontSize inline style
+			// Browser-default 2em is too large for the work item detail panel
+			expect(h1?.style.fontSize).toBeTruthy();
+		});
+	});
+});