feat: consolidate shared UI and harden browser authority for release

2026-09-08 01:35:05 +02:00
parent ac40774785
commit b75ca34295
143 changed files with 8664 additions and 752 deletions
@@ -0,0 +1,49 @@
+import { expect, test } from "@playwright/test";
+
+for (const width of [1440, 900, 390]) {
+  test(`mixed form controls and attachment actions remain aligned at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 1200 });
+    const errors: string[] = [];
+    page.on("pageerror", (error) => errors.push(error.message));
+    await page.route((url) => url.pathname.startsWith("/api/"), (route) => route.abort());
+    await page.goto("/?form-control-layout&language=en");
+    const grid = page.getByTestId("mixed-form-grid");
+    const password = grid.locator('input[type="password"]');
+    const remove = grid.locator(".toggle-switch-row").filter({ hasText: "Remove configured secret" });
+    await expect(remove).toBeVisible();
+    if (width > 1100) {
+      for (const [input, toggle] of [
+        [password, remove.locator(".toggle-switch-track")],
+        [grid.getByRole("textbox", { name: "Wrapped field", exact: true }), grid.locator(".content-grid-item .toggle-switch-track")],
+        [page.getByRole("textbox", { name: "Other setting", exact: true }), page.getByTestId("mixed-form-layout").locator(".toggle-switch-track")]
+      ]) {
+        await expect.poll(async () => {
+          const a = await input.boundingBox(), b = await toggle.boundingBox();
+          return a && b ? Math.abs(a.y + a.height / 2 - b.y - b.height / 2) : Infinity;
+        }).toBeLessThan(2);
+      }
+      const long = await grid.getByRole("textbox", { name: "Long label field" }).boundingBox();
+      const short = await grid.getByRole("textbox", { name: "Short label field" }).boundingBox();
+      expect(Math.abs(long!.y - short!.y)).toBeLessThan(2);
+    } else {
+      const field = await password.boundingBox(), toggle = await remove.boundingBox();
+      expect(toggle!.y).toBeGreaterThan(field!.y + field!.height);
+      expect(toggle!.height).toBeLessThanOrEqual(64);
+    }
+    await remove.getByRole("checkbox").focus();
+    await page.keyboard.press("Space");
+    await expect(remove.getByRole("checkbox")).toBeChecked();
+    await password.fill("fixture-only");
+    await expect(remove.getByRole("checkbox")).toBeDisabled();
+    await expect(page.getByTestId("compact-action").getByRole("button")).toHaveCSS("width", "36px");
+    const attachments = page.getByTestId("global-attachments");
+    const add = attachments.getByRole("button", { name: "Add first attachment", exact: true });
+    await expect(add).toHaveCSS("width", "36px");
+    await expect.poll(() => attachments.locator(".data-grid-empty-action-cell").evaluate((node) => node.getBoundingClientRect().width)).toBeLessThanOrEqual(200);
+    await add.click();
+    await expect(attachments.locator(".data-grid-empty-action-cell")).toHaveCount(0);
+    await expect(attachments.getByRole("button", { name: "Add attachment below", exact: true })).toHaveCSS("width", "36px");
+    await expect.poll(() => page.locator("main").evaluate((node) => node.scrollWidth <= node.clientWidth + 1)).toBe(true);
+    expect(errors).toEqual([]);
+  });
+}