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();
+		});
+	});
+});

frontend/src/components/WorkItemDetailPanel.tsx

@@ -166,7 +166,24 @@ export function WorkItemDetailPanel({
 						className="markdown-body"
 						style={{ fontSize: "0.9em", lineHeight: 1.6 }}
 					>
-						<Markdown>{content}</Markdown>
+						<Markdown
+							components={{
+								// biome-ignore lint/suspicious/noExplicitAny: react-markdown requires any for component props
+								h1: ({ children }: any) => (
+									<h1 style={{ fontSize: "1.2em" }}>{children}</h1>
+								),
+								// biome-ignore lint/suspicious/noExplicitAny: react-markdown requires any for component props
+								h2: ({ children }: any) => (
+									<h2 style={{ fontSize: "1.1em" }}>{children}</h2>
+								),
+								// biome-ignore lint/suspicious/noExplicitAny: react-markdown requires any for component props
+								h3: ({ children }: any) => (
+									<h3 style={{ fontSize: "1em" }}>{children}</h3>
+								),
+							}}
+						>
+							{content}
+						</Markdown>
 					</div>
 				)}