From d09db85e894fa3905fbc8685434426dfa947fe46 Mon Sep 17 00:00:00 2001
From: "paseo-bot[bot]" <266920839+paseo-bot[bot]@users.noreply.github.com>
Date: Thu, 15 Oct 2026 02:33:12 +0200
Subject: [PATCH] test(app): retain reproduction for code size lost during
 appearance update

---
 .../appearance-size-race.diagnostic.spec.ts   | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 packages/app/e2e/browser/appearance-size-race.diagnostic.spec.ts

diff --git a/packages/app/e2e/browser/appearance-size-race.diagnostic.spec.ts b/packages/app/e2e/browser/appearance-size-race.diagnostic.spec.ts
new file mode 100644
index 0000000000..5f5d792c8c
--- /dev/null
+++ b/packages/app/e2e/browser/appearance-size-race.diagnostic.spec.ts
@@ -0,0 +1,70 @@
+import { expect, test } from "../support/fixtures";
+import type { Page } from "@playwright/test";
+import { openSettingsSection } from "../support/helpers/settings";
+
+async function openDefaultAppearance(page: Page) {
+  await page.addInitScript(() => {
+    localStorage.setItem("@paseo:app-settings", JSON.stringify({ codeFontSize: 12 }));
+    const observations: unknown[] = [];
+    Object.assign(window, { fontRaceObservations: observations });
+    for (const type of ["input", "change", "keydown", "focusin", "focusout"]) {
+      document.addEventListener(
+        type,
+        (event) => {
+          const input = event.target as HTMLInputElement;
+          if (!input?.getAttribute?.("aria-label")?.startsWith("Code font")) return;
+          observations.push({
+            type,
+            label: input.getAttribute("aria-label"),
+            value: input.value,
+            key: (event as KeyboardEvent).key,
+            at: performance.now(),
+          });
+        },
+        true,
+      );
+    }
+    new MutationObserver((records) => {
+      for (const record of records)
+        for (const removed of record.removedNodes) {
+          if (
+            removed instanceof Element &&
+            (removed.matches('[aria-label="Code font size"]') ||
+              removed.querySelector('[aria-label="Code font size"]'))
+          )
+            observations.push({ type: "removed-size-input", at: performance.now() });
+        }
+    }).observe(document, { childList: true, subtree: true });
+  });
+  await page.goto("/settings");
+  await openSettingsSection(page, "appearance");
+}
+
+async function changeCodeFamilyThenSize(page: Page) {
+  await page.getByLabel("Code font family").fill("Courier New, Courier, monospace");
+  await page.getByLabel("Code font family").press("Enter");
+  await page.getByLabel("Code font size").fill("18");
+  await page.getByLabel("Code font size").press("Enter");
+}
+
+test("keeps the size entered immediately after changing the code font family", async ({
+  page,
+}, testInfo) => {
+  await openDefaultAppearance(page);
+  try {
+    await changeCodeFamilyThenSize(page);
+    await expect(page.getByLabel("Code font size")).toHaveValue("18");
+  } finally {
+    await testInfo.attach("font-race", {
+      body: JSON.stringify(
+        await page.evaluate(() => ({
+          events: (window as Window & { fontRaceObservations: unknown[] }).fontRaceObservations,
+          stored: localStorage.getItem("@paseo:app-settings"),
+        })),
+        null,
+        2,
+      ),
+      contentType: "application/json",
+    });
+  }
+});