fix: tighten narrow viewport behavior

2026-09-12 09:42:17 +07:00
parent 4fef0e8b74
commit e7f3de1ddc
4 changed files with 22 additions and 3 deletions
@@ -91,3 +91,20 @@ for (const viewport of [{ name: "desktop", width: 1280, height: 900 }, { name: "
    expect(dimensions.scroll).toBeLessThanOrEqual(dimensions.width);
  });
 }
+
+test("public pages fit the narrow viewport and expose the skip link", async ({ page }) => {
+  await page.setViewportSize({ width: 320, height: 800 });
+  for (const path of ["/", "/records", "/report", "/waterbodies", "/status"]) {
+    await page.goto(path);
+    const dimensions = await page.evaluate(() => ({
+      clientWidth: document.documentElement.clientWidth,
+      scrollWidth: document.documentElement.scrollWidth,
+    }));
+    expect(dimensions.scrollWidth, `${path} must not scroll horizontally`).toBeLessThanOrEqual(dimensions.clientWidth);
+  }
+
+  await page.goto("/report");
+  await page.keyboard.press("Tab");
+  await expect(page.locator(".skip-link")).toBeFocused();
+  await expect(page.locator(".skip-link")).toBeVisible();
+});