fix: contain oversized Markdown math accessibly

e2e/tests/smoke.blog.spec.ts

@@ -174,6 +174,72 @@ test("post detail page renders", async ({ page }) => {
 	expect(errors, `Console errors detected: \n${errors.join("\n")}`).toEqual([]);
 });
 
+test("oversized math stays readable without overflowing the article", async ({
+	page,
+	request,
+}) => {
+	const longMath = String.raw`\underbrace{abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz}_{\text{long expression}}`;
+	const post = await createPost(request, {
+		title: "Math layout regression",
+		slug: "math-layout-regression",
+		excerpt: "Inline and display math remain accessible on narrow screens.",
+		content: `Ordinary inline $E=mc^2$ stays in the paragraph.\n\nLong inline $${longMath}$ ends here.\n\n$$\n${longMath}\n$$\n\n| Value | Result |\n| --- | --- |\n| one | two |`,
+		published: true,
+	});
+	try {
+		await page.goto("/pages/blog/math-layout-regression", {
+			waitUntil: "networkidle",
+		});
+		const math = page.locator(".markdown-body .katex");
+		await expect(math).toHaveCount(3);
+		await page.evaluate(() => document.fonts.ready);
+		for (const width of [320, 390, 1280]) {
+			await page.setViewportSize({ width, height: 900 });
+			await expect
+				.poll(() =>
+					page.evaluate(
+						() => document.documentElement.scrollWidth - innerWidth,
+					),
+				)
+				.toBeLessThanOrEqual(1);
+			await expect(
+				page.getByText("ends here.", { exact: false }),
+			).toBeVisible();
+			await expect(
+				page.getByRole("cell", { name: "two", exact: true }),
+			).toBeVisible();
+			for (const expression of await math.all()) {
+				await expect(expression.locator("math")).toHaveCount(1);
+				await expect(expression.locator(".katex-html")).toHaveAttribute(
+					"aria-hidden",
+					"true",
+				);
+				const bounds = await expression.evaluate((node) => ({
+					width: node.clientWidth,
+					content: node.scrollWidth,
+				}));
+				if (bounds.content <= bounds.width + 1) continue;
+				await expression.focus();
+				await expect(expression).toBeFocused();
+				for (let step = 0; step < 20; step++) {
+					await page.keyboard.press("ArrowRight");
+					await page.waitForTimeout(50);
+				}
+				await expect
+					.poll(() =>
+						expression.evaluate((node) => node.scrollLeft + node.clientWidth),
+					)
+					.toBeGreaterThanOrEqual(bounds.content - 1);
+			}
+		}
+	} finally {
+		const deleted = await request.delete(`/api/data/posts/${post.id}`, {
+			headers: mockAuthHeaders(),
+		});
+		expect(deleted.ok()).toBeTruthy();
+	}
+});
+
 test("sitemap.xml includes blog pages", async ({ request }) => {
 	const response = await request.get("/sitemap.xml");
 	expect(response.ok()).toBeTruthy();

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@btst/codegen",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "BTST project scaffolding and CLI passthrough commands.",
   "repository": {
     "type": "git",

packages/cli/src/utils/__tests__/package-installer.test.ts

@@ -21,7 +21,7 @@ describe("installInitDependencies", () => {
 		});
 
 		const installArguments = execa.mock.calls[0]?.[1] as string[];
-		expect(installArguments).toContain("@btst/[email protected].0");
+		expect(installArguments).toContain("@btst/[email protected].1");
 		expect(installArguments).toContain("[email protected]");
 		expect(installArguments).toContain("@btst/[email protected]");
 		expect(installArguments).toContain("[email protected]");

packages/cli/src/utils/package-installer.ts

@@ -44,7 +44,7 @@ export async function installInitDependencies(input: {
 	});
 
 	const packages = [
-		"@btst/[email protected].0",
+		"@btst/[email protected].1",
 		"@btst/[email protected]",
 		"@tanstack/[email protected]",
 		"[email protected]",

packages/stack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@btst/stack",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "A composable, plugin-based library for building full-stack applications.",
   "repository": {
     "type": "git",

packages/stack/src/plugins/blog/client/components/shared/markdown-content-styles.css

@@ -13,6 +13,19 @@
 	max-width: 100%;
 }
 
+.markdown-content .markdown-inner .markdown-body .katex {
+	display: inline-block;
+	max-width: 100%;
+	overflow-x: auto;
+	text-align: start;
+	vertical-align: middle;
+}
+
+.markdown-content .markdown-inner .markdown-body .katex:focus-visible {
+	outline: 2px solid currentColor;
+	outline-offset: 2px;
+}
+
 .markdown-content .markdown-inner .markdown-body .markdown-image-wrapper {
 	display: block;
 	position: relative;

packages/ui/src/components/markdown-content.tsx

@@ -386,6 +386,13 @@ export function MarkdownContent({
 		return {
 			a: AnchorRenderer,
 			img: ImgRenderer,
+			span: ({ node: _node, className, ...props }) => (
+				<span
+					{...props}
+					className={className}
+					tabIndex={className?.split(/\s+/).includes("katex") ? 0 : props.tabIndex}
+				/>
+			),
 			code: CodeRenderer,
 			pre: PreRenderer,
 			h1: createHeadingRenderer("h1"),

packages/ui/src/styles/markdown-content.css

@@ -351,6 +351,19 @@
 	overflow-wrap: anywhere;
 }
 
+.markdown-content .markdown-inner .markdown-body .katex {
+	display: inline-block;
+	max-width: 100%;
+	overflow-x: auto;
+	text-align: start;
+	vertical-align: middle;
+}
+
+.markdown-content .markdown-inner .markdown-body .katex:focus-visible {
+	outline: 2px solid currentColor;
+	outline-offset: 2px;
+}
+
 /* Simplified chat variant - more compact for chat messages */
 .markdown-content-chat .markdown-inner .markdown-body {
 	padding: 0;