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

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

e2e/settings.spec.ts

@@ -1,45 +1,5 @@
 import { expect, test } from "./fixtures";
 
-test("Add Python Interpreter keeps environment labels and fields inside their rows", async ({ workbench: page }) => {
-  await page.keyboard.press("Meta+,");
-  const settings = page.getByRole("dialog", { name: "Settings", exact: true });
-  await settings.getByRole("textbox", { name: "Search settings" }).fill("Python Interpreter");
-  await settings
-    .getByRole("tree", { name: "Settings pages" })
-    .getByRole("treeitem", { name: "Python Interpreter", exact: true })
-    .click();
-  await settings.getByRole("button", { name: "Add Interpreter…", exact: true }).click();
-  const dialog = page.getByRole("dialog", { name: "Add Python Interpreter", exact: true });
-  await expect(dialog).toBeVisible();
-
-  for (const width of [1000, 800, 520]) {
-    await page.setViewportSize({ width, height: 760 });
-    await expect(async () => {
-      const labelsFit = await dialog.getByRole("list", { name: "Interpreter type" }).evaluate((list) =>
-        [...list.querySelectorAll("button")].every((button) => {
-          const box = button.getBoundingClientRect();
-          const range = document.createRange();
-          range.selectNodeContents(button);
-          return [...range.getClientRects()].every(
-            (r) => r.top >= box.top - 1 && r.bottom <= box.bottom + 1 && r.right <= box.right + 1,
-          );
-        }),
-      );
-      expect(labelsFit).toBe(true);
-    }).toPass({ timeout: 3000 });
-
-    const location = dialog.getByRole("textbox", { name: "Location:", exact: true });
-    const fieldSpacing = await location.evaluate((input) => ({
-      rowHeight: input.parentElement!.getBoundingClientRect().height,
-      fieldHeight: input.getBoundingClientRect().height,
-    }));
-    expect(fieldSpacing.rowHeight).toBeLessThanOrEqual(fieldSpacing.fieldHeight + 1);
-    const base = await dialog.getByRole("button", { name: "Base interpreter", exact: true }).boundingBox();
-    const loc = await location.boundingBox();
-    expect(base!.y - loc!.y - loc!.height).toBeLessThan(50);
-  }
-});
-
 test("Project Structure keeps edits across repeated shortcuts and applies them", async ({ workbench: page }) => {
   await page.keyboard.press("Meta+;");
   const dialog = page.getByRole("dialog", { name: "Project Structure", exact: 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);

src/features/settings/languages/AddInterpreterDialog.tsx

@@ -226,7 +226,7 @@ export function AddInterpreterDialog({
               <label htmlFor={ids.existing}>
                 <T>Interpreter:</T>
               </label>
-              <div className={styles.pathRow}>
+              <div className={`${styles.pathRow} ${styles.existingPathRow}`}>
                 <Select
                   id={ids.existing}
                   className={styles.pathInput}

src/features/settings/languages/Sdk.module.css

@@ -152,7 +152,7 @@
 /* Add Python Interpreter dialog */
 .dialogBody {
   display: grid;
-  grid-template-columns: minmax(150px, max-content) minmax(0, 1fr);
+  grid-template-columns: 150px minmax(0, 1fr);
   min-height: 300px;
 }
 .kinds {
@@ -174,7 +174,6 @@
   color: var(--fg);
   font: inherit;
   text-align: left;
-  white-space: nowrap;
 }
 .kindOn {
   background: var(--bg-list-selected);
@@ -188,14 +187,12 @@
 }
 .radios {
   display: flex;
-  flex-wrap: wrap;
-  gap: 6px 16px;
+  gap: 16px;
 }
 .radio {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  white-space: nowrap;
 }
 .pathRow {
   display: flex;
@@ -204,7 +201,7 @@
   flex: 1;
   min-width: 0;
 }
-.form > .pathRow {
+.existingPathRow {
   flex: none;
 }
 .pathInput {