From ea8e726dabd5556e696ca03fa43ec9e8520feca5 Mon Sep 17 00:00:00 2001 From: khoinguyenpham04 <137921741+khoinguyenpham04@users.noreply.github.com> Date: Tue, 6 Oct 2026 22:56:31 +0100 Subject: [PATCH 1/3] fix(comments): stop the comment form from widening right-to-left pages The honeypot field was hidden with left:-9999px. In right-to-left documents that offset lies on the scrollable side of the page, so Firefox, and Chromium and WebKit whenever the form has a positioned ancestor, made the page about 10,000px wide. Hide the field in place with a clipped 1px box instead; bots still see a fillable input, and aria-hidden and tabindex=-1 keep it from people. Also switch the reply indent and the signed-in email separator to logical properties so they sit on the correct side in RTL. --- .changeset/comment-form-rtl-overflow.md | 5 ++++ e2e/tests/public-page-styles.spec.ts | 24 ++++++++++++++++++- .../core/src/components/CommentForm.astro | 4 ++-- packages/core/src/components/Comments.astro | 2 +- 4 files changed, 31 insertions(+), 4 deletions(-) create mode 100644 .changeset/comment-form-rtl-overflow.md diff --git a/.changeset/comment-form-rtl-overflow.md b/.changeset/comment-form-rtl-overflow.md new file mode 100644 index 0000000000..27aab35586 --- /dev/null +++ b/.changeset/comment-form-rtl-overflow.md @@ -0,0 +1,5 @@ +--- +"emdash": patch +--- + +Fixes `` widening right-to-left pages (``) by about 10,000 pixels, which gave every page with a comment form a horizontal scrollbar. Threaded replies in `` and the separator before a signed-in commenter's email in `` are now also spaced correctly in right-to-left languages. diff --git a/e2e/tests/public-page-styles.spec.ts b/e2e/tests/public-page-styles.spec.ts index 3c18376bd3..1d9d2526ae 100644 --- a/e2e/tests/public-page-styles.spec.ts +++ b/e2e/tests/public-page-styles.spec.ts @@ -1,6 +1,8 @@ +import type { Page } from "@playwright/test"; + import { test, expect } from "../fixtures"; -test("a component's scoped styles apply on a public content page", async ({ page }) => { +async function openPostWithCommentForm(page: Page) { const field = page.locator(".ec-comment-form-field").first(); // The workerd dev runner's Vite dep optimizer can transiently 500 a cold @@ -12,5 +14,25 @@ test("a component's scoped styles apply on a public content page", async ({ page await page.waitForTimeout(1000); } + return field; +} + +test("a component's scoped styles apply on a public content page", async ({ page }) => { + const field = await openPostWithCommentForm(page); + await expect(field).toHaveCSS("display", "flex"); }); + +test("the comment form doesn't widen a right-to-left page", async ({ page }) => { + await expect(await openPostWithCommentForm(page)).toBeVisible(); + + const width = await page.locator("html").evaluate((html) => { + html.dir = "rtl"; + // Chromium only widens the page for off-screen content that has a + // positioned ancestor. Many site layouts have one; Firefox needs none. + document.body.style.position = "relative"; + return { scroll: html.scrollWidth, client: html.clientWidth }; + }); + + expect(width.scroll).toBe(width.client); +}); diff --git a/packages/core/src/components/CommentForm.astro b/packages/core/src/components/CommentForm.astro index 86a10ad67b..d4907351e9 100644 --- a/packages/core/src/components/CommentForm.astro +++ b/packages/core/src/components/CommentForm.astro @@ -108,7 +108,7 @@ const endpoint = `/_emdash/api/comments/${encodeURIComponent(collection)}/${enco {/* Honeypot — hidden from humans, filled by bots */}