fix(ui): contain mobile article fields and stabilize history checks

e2e/ui/fixtures/furniture-jobs-harness.tsx

@@ -18,10 +18,18 @@ export function FurnitureJobsHarness() {
 			>
 				Refresh twice
 			</button>
-			<button type="button" onClick={() => void history.navigate("next")}>
+			<button
+				type="button"
+				disabled={history.loading || !history.nextCursor}
+				onClick={() => void history.navigate("next")}
+			>
 				Next page
 			</button>
-			<button type="button" onClick={() => void history.navigate("previous")}>
+			<button
+				type="button"
+				disabled={history.loading || history.page === 1}
+				onClick={() => void history.navigate("previous")}
+			>
 				Previous page
 			</button>
 			<output aria-label="Page">{history.page}</output>

e2e/ui/furniture-jobs.spec.ts

@@ -56,6 +56,7 @@ test("history hook deduplicates refreshes, pages and reports completion once", a
 	await page.getByRole("button", { name: "Refresh twice" }).click();
 	await expect(page.getByLabel("Loading", { exact: true })).toHaveText("true");
 	await expect(page.getByLabel("Completions", { exact: true })).toHaveText("1");
+	await expect(page.getByLabel("Loading", { exact: true })).toHaveText("false");
 	await page.getByRole("button", { name: "Refresh twice" }).click();
 	await expect(page.getByLabel("Loading", { exact: true })).toHaveText("true");
 	await expect(page.getByLabel("Loading", { exact: true })).toHaveText("false");

e2e/ui/workflows.spec.ts

@@ -65,6 +65,13 @@ test("article form and preview dialog pass accessibility with focus return", asy
 }) => {
 	await page.goto("/admin/articles/new");
 	await expect(page.locator("iframe.tox-edit-area__iframe")).toBeVisible();
+	await expect
+		.poll(() =>
+			page
+				.locator("form")
+				.evaluate((form) => form.scrollWidth <= form.clientWidth),
+		)
+		.toBe(true);
 	await accessible(page);
 	await page.locator('input[name="title"]').fill("Accessible community update");
 	const preview = page.getByRole("button", { name: "Preview", exact: true });
@@ -129,3 +136,27 @@ test("queued synchronization survives reload without duplicate submission", asyn
 	await accessible(page);
 	await expect(page.getByRole("main")).toHaveScreenshot("sync-history.png");
 });
+
+test("article editor fits a narrow mobile card without horizontal overflow", async ({
+	page,
+}) => {
+	await page.setViewportSize({ width: 360, height: 844 });
+	await page.goto("/admin/articles/new");
+	await expect(page.locator("iframe.tox-edit-area__iframe")).toBeVisible();
+	await expect
+		.poll(() =>
+			page
+				.locator("form")
+				.evaluate((form) => form.scrollWidth <= form.clientWidth),
+		)
+		.toBe(true);
+	await expect
+		.poll(() =>
+			page.evaluate(
+				() =>
+					document.documentElement.scrollWidth <=
+					document.documentElement.clientWidth,
+			),
+		)
+		.toBe(true);
+});

src/components/admin/article-form.tsx

@@ -186,7 +186,11 @@ export function ArticleForm({
 				});
 			}}
 			className="admin-card"
-			style={{ display: "grid", gap: "1rem" }}
+			style={{
+				display: "grid",
+				gridTemplateColumns: "minmax(0, 1fr)",
+				gap: "1rem",
+			}}
 		>
 			<fieldset disabled={pending} className="contents">
 				<input type="hidden" name="baseToken" value={token} />