Repository navigation
fix(comments): stop the comment form from widening right-to-left pages - #3955
Conversation
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 detectedLatest commit: 2468504 The changes in this PR will be included in the next version bump. This PR includes changesets to release 12 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
Bot
added
review/needs-review
🚀 Deploying Preview to Cloudflare 🚀Preview URL: https://noah-quirky-kowalevski-fcdf66.try.emdashcms.com, https://noah-quirky-kowalevski-fcdf66-emdash-playground.emdash-cms.workers.dev (commit 2468504)This URL reflects your latest Preview deploymentPreview Deployments by commit
|
@emdash-cms/admin
@emdash-cms/auth
@emdash-cms/auth-atproto
@emdash-cms/blocks
@emdash-cms/cloudflare
@emdash-cms/contentful-to-portable-text
emdash
create-emdash
@emdash-cms/gutenberg-to-portable-text
@emdash-cms/plugin-cli
@emdash-cms/plugin-test
@emdash-cms/plugin-types
@emdash-cms/registry-client
@emdash-cms/registry-lexicons
@emdash-cms/registry-loader
@emdash-cms/registry-moderation
@emdash-cms/registry-verification
upgrade-emdash
@emdash-cms/sandbox-workerd
@emdash-cms/x402
@emdash-cms/plugin-ai-moderation
@emdash-cms/plugin-atproto
@emdash-cms/plugin-audit-log
@emdash-cms/plugin-color
@emdash-cms/plugin-embeds
@emdash-cms/plugin-field-kit
@emdash-cms/plugin-forms
@emdash-cms/plugin-webhook-notifier
commit: |
![emdashbot[bot]](https://avatars.githubusercontent.com/in/3255304?s=60&v=4){kind=small}
There was a problem hiding this comment.
This is the right fix for the right problem: the off-screen honeypot in <CommentForm> legitimately caused RTL pages to overflow, and the patch replaces it with a clipped in-place box that keeps the honeypot functional while removing the overflow source. The two logical-property swaps (padding-left → padding-inline-start, margin-right → margin-inline-end) are also the correct, low-risk way to align reply indentation and the signed-in email separator for RTL.
I reviewed the diff, the full changed components, the e2e regression test, and the changeset against AGENTS.md conventions. No logic bugs, regressions, authorization, query-count, localization, or changeset issues were introduced. The e2e test is a sensible regression guard: it forces the positioned-ancestor case Chromium needs to reproduce the overflow, asserts scrollWidth === clientWidth, and leaves no state behind because Playwright isolates pages per test.
One non-blocking observation for a follow-up: packages/plugins/forms/src/astro/FormEmbed.astro still uses the same old style="position:absolute;left:-9999px;" honeypot pattern, so it likely has the same RTL overflow bug. That’s outside this PR’s scope and should be fixed separately rather than tacked on here.
LGTM.
github-actions
Bot
added
review/approved
2 participants
What does this PR do?
<CommentForm>hid its spam honeypot withposition:absolute;left:-9999px;top:-9999px. On right-to-left pages (<html dir="rtl">) that offset is on the scrollable side, so the page became about 10,000px wider and scrolled sideways into empty space. Firefox did this on every RTL page with the form. Chrome and Safari did it when the form or an element around it is positioned, for example withposition: relative.The honeypot is now hidden in place with a clipped 1px box (
width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap). The input inside keeps its normal size, so bots still find and fill it, but people can't see or click it. The existingaria-hidden="true"andtabindex="-1"keep it away from screen readers and keyboard users.Two physical properties also become logical, so they sit on the correct side in RTL:
<Comments>reply indent:padding-left→padding-inline-start<CommentForm>separator before a signed-in commenter's email:margin-right→margin-inline-endFollow-up to #3951, which noted the honeypot problem.
Type of change
Checklist
pnpm typecheckpassespnpm lintpassespnpm testpasses (or targeted tests for my change)pnpm formathas been runmessages.pochanges except in translation PRs — a workflow extracts catalogs on merge tomain. (n/a: no admin UI changes)AI-generated code disclosure
Screenshots / test output
A blog template post in Firefox with
dir="rtl", before the fix, scrolled 640px sideways. After the fix the same page is 1,280px wide and can't scroll sideways.Comments on a right-to-left page while signed in, before and after:
Document width in RTL on that post, signed out (
scrollWidth, viewport 1280):With a positioned ancestor around the form, the old honeypot gives 11271 in all three engines and the new one gives 1280.
e2e/tests/public-page-styles.spec.tsfails onmainwithExpected: 1280, Received: 11271and passes with this change. It positions<body>because Chromium, the only Playwright project, leaves the off-page box out of the scroll width otherwise.--repeat-each=15on the Node target and 16/16 with--repeat-each=8onEMDASH_E2E_TARGET=cloudflare.fill()still fills the honeypot (the input keeps a 147×22 box), anddocument.elementFromPointat its centre returns the surrounding form, never the input.pnpm build,pnpm typecheck,pnpm lint, andtests/repro/comments-labels.render.test.tspass.