jb/paseo
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Give readable content its own text size (#3637)

Browse Source 
* feat(app): separate content typography from interface size

Readable prose benefits from its own scale without inflating navigation and controls. Preserve existing users’ rendered size during migration while giving fresh desktop installs a 15px content default.

* test(app): cover independent content typography

The appearance journey now verifies that changing interface size leaves content size intact. Timeline traversal yields when a test deliberately holds the requested page, so the helper no longer waits on its own gate.

* test(desktop): cover independent content typography

The desktop appearance regression follows the renamed Interface control and verifies it does not alter Content size.
This commit is contained in:
Mohamed Boudra
2026-08-21 12:35:23 +02:00
committed by GitHub
parent c032df5b3d
commit 602860625c
31 changed files with 419 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/desktop/e2e/appearance-font-size.electron.mjs
+12 -8
View File
@@ -15,29 +15,33 @@ export async function runAppearanceFontSizeRegression(page) {
await page.getByLabel("Theme: System", { exact: true }).click();
await page.getByText("Pure black", { exact: true }).click();
const input = page.getByRole("textbox", { name: "Base font size" });
const interfaceSizeInput = page.getByRole("textbox", { name: "Interface font size" });
const contentSizeInput = page.getByRole("textbox", { name: "Content font size" });
const sectionTitle = page.getByText("Theme", { exact: true }).first();
await input.waitFor({ state: "visible", timeout: SETTINGS_TIMEOUT_MS });
await interfaceSizeInput.waitFor({ state: "visible", timeout: SETTINGS_TIMEOUT_MS });
assert((await input.inputValue()) === "14", "Base font size did not start at 14px");
assert((await interfaceSizeInput.inputValue()) === "14", "Interface size did not start at 14px");
assert((await contentSizeInput.inputValue()) === "15", "Content size did not start at 15px");
assert(
(await readFontSize(sectionTitle)) === "12px",
"Theme label did not start at the default 12px ramp size",
);
await input.fill("15");
await input.press("Tab");
await interfaceSizeInput.fill("12");
await interfaceSizeInput.press("Tab");
await page.waitForFunction(
() => {
const inputElement = document.querySelector('input[aria-label="Base font size"]');
const interfaceInput = document.querySelector('input[aria-label="Interface font size"]');
const contentInput = document.querySelector('input[aria-label="Content font size"]');
const themeLabel = [...document.querySelectorAll("div")].find(
(element) => element.children.length === 0 && element.textContent?.trim() === "Theme",
);
return (
inputElement?.value === "15" &&
interfaceInput?.value === "12" &&
contentInput?.value === "15" &&
themeLabel instanceof HTMLElement &&
getComputedStyle(themeLabel).fontSize === "13px"
getComputedStyle(themeLabel).fontSize === "10px"
);
},
undefined,