diff --git a/e2e/ui/__screenshots__/win32/mobile/workflows.spec.ts/article-form.png b/e2e/ui/__screenshots__/win32/mobile/workflows.spec.ts/article-form.png index ea28e6d2..89780394 100644 Binary files a/e2e/ui/__screenshots__/win32/mobile/workflows.spec.ts/article-form.png and b/e2e/ui/__screenshots__/win32/mobile/workflows.spec.ts/article-form.png differ diff --git a/e2e/ui/fixtures/furniture-jobs-harness.tsx b/e2e/ui/fixtures/furniture-jobs-harness.tsx index 97e77e1a..40b581ad 100644 --- a/e2e/ui/fixtures/furniture-jobs-harness.tsx +++ b/e2e/ui/fixtures/furniture-jobs-harness.tsx @@ -18,10 +18,18 @@ export function FurnitureJobsHarness() { > Refresh twice - - {history.page} diff --git a/e2e/ui/furniture-jobs.spec.ts b/e2e/ui/furniture-jobs.spec.ts index 492605e6..00899947 100644 --- a/e2e/ui/furniture-jobs.spec.ts +++ b/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"); diff --git a/e2e/ui/workflows.spec.ts b/e2e/ui/workflows.spec.ts index e6224645..5b3b2414 100644 --- a/e2e/ui/workflows.spec.ts +++ b/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); +}); diff --git a/src/components/admin/article-form.tsx b/src/components/admin/article-form.tsx index 34ae636b..c649639f 100644 --- a/src/components/admin/article-form.tsx +++ b/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", + }} >