import { expect, test } from "@playwright/test";

test("renders an accessible authentication fallback at a narrow viewport", async ({ page }) => {
	await page.setViewportSize({ width: 375, height: 667 });
	await page.emulateMedia({ reducedMotion: "reduce" });
	await page.goto("/");
	await expect(page.getByRole("main")).toBeVisible();
	await expect(page.getByRole("heading", { name: "Sign in" })).toBeVisible();
	const username = page.getByLabel("Username");
	await expect(username).toBeVisible();
	await username.focus();
	await expect(username).toBeFocused();
});