fix(comments): stop the comment form from widening right-to-left pages

.changeset/comment-form-rtl-overflow.md

@@ -0,0 +1,5 @@
+---
+"emdash": patch
+---
+
+Fixes `<CommentForm>` making right-to-left pages (`<html dir="rtl">`) about 10,000 pixels wider, with a horizontal scrollbar. This happened on every such page in Firefox, and in Chrome and Safari when the form or an element around it is positioned, for example with `position: relative`. On right-to-left pages, `<Comments>` now also indents threaded replies from the right, and the separator before a signed-in commenter's email in `<CommentForm>` no longer touches the email.

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 leaves off-page absolutely positioned content out of the
+		// scroll width unless that content has a positioned ancestor.
+		document.body.style.position = "relative";
+		return { scroll: html.scrollWidth, client: html.clientWidth };
+	});
+
+	expect(width.scroll).toBe(width.client);
+});

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 */}
 			<div
 				aria-hidden="true"
-				style="position:absolute;left:-9999px;top:-9999px;"
+				style="position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;"
 			>
 				<label>
 					Don't fill this out
@@ -323,7 +323,7 @@ const endpoint = `/_emdash/api/comments/${encodeURIComponent(collection)}/${enco
 
 	.ec-comment-user-email::before {
 		content: "·";
-		margin-right: 0.5rem;
+		margin-inline-end: 0.5rem;
 	}
 
 	.ec-comment-form-submit {

packages/core/src/components/Comments.astro

@@ -313,7 +313,7 @@ const REACTION_SCRIPT = `
 
 	.ec-comment-replies {
 		margin-top: var(--ec-comment-gap);
-		padding-left: var(--ec-comment-indent);
+		padding-inline-start: var(--ec-comment-indent);
 	}
 
 	.ec-comment-replies > li + li {