738811dbe7
Text sizes now follow a --font-scale variable that is 1 on wider screens and 8/7 below 768px, so the 14px base text reads at 16px on phones (Safari stops zooming into fields at that size) and every other size grows by the same ratio. One-off pixel sizes in the shell move onto the shared text tokens so they scale too. The stage subtitle now truncates inside the screen instead of spilling past both edges. Claude-Session: https://claude.ai/code/session_01PFEDgbyJm12ExL3Kn4Dk8B Co-authored-by: Claude <noreply@anthropic.com>
42 lines
1.7 KiB
TypeScript
42 lines
1.7 KiB
TypeScript
import { expect, type Locator, test } from "@playwright/test";
|
|
import { captureScreenshot, completeOnboarding, signup } from "./helpers";
|
|
|
|
async function fontSize(locator: Locator) {
|
|
return locator.evaluate((element) => Number.parseFloat(getComputedStyle(element).fontSize));
|
|
}
|
|
|
|
test("phone widths read text at 16px and up while desktop keeps its sizes", async ({
|
|
page,
|
|
}, testInfo) => {
|
|
const stamp = Date.now();
|
|
await signup(page, `mobile-font-${stamp}@rakazo.test`, "password12", "Font QA");
|
|
await completeOnboarding(page);
|
|
|
|
const composer = page.getByRole("combobox", { name: /^Message/ });
|
|
await composer.fill("Please review `shared/PROJECT_CHECKPOINT_WRAPUP.md`.");
|
|
await composer.press("Enter");
|
|
const reply = page
|
|
.getByTestId("transcript")
|
|
.locator("[data-message-id]")
|
|
.filter({ hasText: "done. i handled:" });
|
|
await expect(reply).toBeVisible({ timeout: 30_000 });
|
|
|
|
const smallText = page.locator(".text-ui-body-sm").first();
|
|
const desktopSmall = await fontSize(smallText);
|
|
expect(desktopSmall).toBe(14);
|
|
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await expect.poll(() => fontSize(smallText)).toBeCloseTo(16, 1);
|
|
expect(await fontSize(composer)).toBeGreaterThanOrEqual(16);
|
|
|
|
await page.emulateMedia({ colorScheme: "dark" });
|
|
await expect(page.locator("html")).toHaveAttribute("data-theme", "dark");
|
|
await captureScreenshot(page, testInfo, "mobile-font-size-dark");
|
|
await page.emulateMedia({ colorScheme: "light" });
|
|
await expect(page.locator("html")).toHaveAttribute("data-theme", "light");
|
|
await captureScreenshot(page, testInfo, "mobile-font-size-light");
|
|
|
|
await page.setViewportSize({ width: 1280, height: 720 });
|
|
await expect.poll(() => fontSize(smallText)).toBe(desktopSmall);
|
|
});
|