fix(database): keep credential dialog fields inside the form (#2103)

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);
+    }
+  });
+}

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);