diff --git a/e2e/databaseDialogLayout.spec.ts b/e2e/databaseDialogLayout.spec.ts new file mode 100644 index 000000000..ca28d183b --- /dev/null +++ b/e2e/databaseDialogLayout.spec.ts @@ -0,0 +1,34 @@ +import { expect, test } from "./fixtures"; + +for (const kind of ["password", "sshSecret", "params"] as const) { + test(`database ${kind} dialog keeps its fields inside the window`, async ({ workbench: page }) => { + await page.evaluate(async (kind) => { + const path = "/src/features/database/store.ts"; + const { openDialog } = await import(/* @vite-ignore */ path); + const source = { + id: "layout-test", + name: "Layout test", + driver: "postgres", + user: "account_".repeat(30), + ssh: { enabled: true, host: "bastion.example.invalid", auth: "password" }, + }; + if (kind === "password") openDialog({ kind, source, resolve: () => {} }); + else if (kind === "sshSecret") + openDialog({ kind, source, prompt: "SSH password required for " + "host_".repeat(30), resolve: () => {} }); + else openDialog({ kind, names: ["parameter_".repeat(25)], resolve: () => {} }); + }, kind); + const dialog = page.getByRole("dialog"); + await expect(dialog).toBeVisible(); + for (const width of [1000, 640, 500]) { + await page.setViewportSize({ width, height: 760 }); + const fits = await dialog.evaluate((dialog) => { + const box = dialog.getBoundingClientRect(); + return [...dialog.querySelectorAll("input, [class*='form_']")].every((el) => { + const r = el.getBoundingClientRect(); + return r.left >= box.left && r.right <= box.right && el.scrollWidth <= el.clientWidth + 1; + }); + }); + expect(fits).toBe(true); + } + }); +} diff --git a/src/features/database/Database.module.css b/src/features/database/Database.module.css index d53fa8808..4aa6642c9 100644 --- a/src/features/database/Database.module.css +++ b/src/features/database/Database.module.css @@ -350,11 +350,15 @@ /* Dialogs. */ .form { display: grid; - grid-template-columns: max-content 1fr; + grid-template-columns: fit-content(40%) minmax(0, 1fr); align-items: center; gap: 8px 12px; - min-width: 440px; + min-width: 0; padding: 14px; + overflow-wrap: anywhere; +} +.form > * { + min-width: 0; } .formLabel { color: var(--fg-secondary);