fix(settings): keep Python interpreter dialog rows aligned

e2e/settings.spec.ts

@@ -1,5 +1,45 @@
 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 });

e2e/settingsPaneLayout.spec.ts

@@ -1,98 +0,0 @@
-import { expect, test } from "./fixtures";
-
-for (const [id, selector] of [
-  ["build.deployment", "[class*='layout'] > [class*='note']"],
-  ["editor.inspections", "[class*='split'] > [class*='details']"],
-  ["languages.servers", "[class*='body'] > [class*='details']"],
-  ["plugins", "[class*='body'] > [class*='details']"],
-  ["tools.agents", "section[aria-label='Codex executable']"],
-]) {
-  test(`${id} keeps its details usable beside the list`, async ({ workbench: page }) => {
-    await page.keyboard.press("Meta+,");
-    const dialog = page.getByRole("dialog", { name: "Settings", exact: true });
-    await expect(dialog).toBeVisible();
-    await page.evaluate(async (id) => {
-      if (id === "tools.agents") {
-        const path = "/src/features/agents/registry.ts";
-        const { tauriCommands } = await import(/* @vite-ignore */ path);
-        tauriCommands.providers = async () => [
-          {
-            id: "codex",
-            name: "Codex",
-            program: "codex",
-            defaultProgram: "codex",
-            args: [],
-            defaultArgs: [],
-            installed: true,
-            commandOverridden: false,
-            env: {},
-          },
-        ];
-      }
-      const path = "/src/features/settings/model/staging.ts";
-      (await import(/* @vite-ignore */ path)).selectPage(id);
-    }, id);
-    const details = dialog.locator(selector).first();
-    await expect(details).toBeAttached();
-    for (const width of [1000, 640, 520]) {
-      await page.setViewportSize({ width, height: 760 });
-      expect((await details.boundingBox())!.width).toBeGreaterThan(180);
-    }
-  });
-}
-
-test("every color scheme page keeps its attribute tree visible", async ({ workbench: page }) => {
-  await page.keyboard.press("Meta+,");
-  await expect(page.getByRole("dialog", { name: "Settings", exact: true })).toBeVisible();
-  await page.setViewportSize({ width: 520, height: 760 });
-  for (const section of [
-    "general",
-    "language-defaults",
-    "debugger",
-    "python",
-    "markdown",
-    "regexp",
-    "java",
-    "kotlin",
-    "php",
-  ]) {
-    await page.evaluate(async (section) => {
-      const path = "/src/features/settings/model/staging.ts";
-      (await import(/* @vite-ignore */ path)).selectPage(`editor.colorScheme.${section}`);
-    }, section);
-    const tree = page.getByRole("tree", { name: "Color scheme attributes" });
-    await expect(tree).toBeAttached();
-    expect((await tree.boundingBox())!.width).toBeGreaterThan(150);
-  }
-});
-
-for (const id of ["editor.fileTemplates", "editor.liveTemplates"]) {
-  test(`${id} keeps its editor reachable beside the template list`, async ({ workbench: page }) => {
-    await page.keyboard.press("Meta+,");
-    await expect(page.getByRole("dialog", { name: "Settings", exact: true })).toBeVisible();
-    await page.evaluate(async (id) => {
-      const path = "/src/features/settings/model/staging.ts";
-      (await import(/* @vite-ignore */ path)).selectPage(id);
-    }, id);
-    await page.setViewportSize({ width: 520, height: 760 });
-    const editor = page.locator("[class*='split'] > [class*='editor']").first();
-    await expect(editor).toBeAttached();
-    expect((await editor.boundingBox())!.width).toBeGreaterThan(200);
-  });
-}
-
-test("Project Structure keeps every details pane usable in a compact window", async ({ workbench: page }) => {
-  await page.keyboard.press("Meta+,");
-  await expect(page.getByRole("dialog", { name: "Settings", exact: true })).toBeVisible();
-  await page.evaluate(async () => {
-    const path = "/src/features/settings/model/staging.ts";
-    (await import(/* @vite-ignore */ path)).selectPage("projectStructure");
-  });
-  await page.setViewportSize({ width: 520, height: 760 });
-  for (const section of ["Modules", "Libraries", "Facets", "Artifacts", "SDKs"]) {
-    await page.getByRole("tab", { name: section, exact: true }).click();
-    const details = page.locator("[class*='splitLayout'] > [class*='detailPane']");
-    await expect(details).toBeAttached();
-    expect((await details.boundingBox())!.width).toBeGreaterThan(200);
-  }
-});

src/features/agents/BuiltinAgents.module.css

@@ -1,6 +1,5 @@
 .split {
   display: flex;
-  min-width: 640px;
   flex: none;
   min-height: 320px;
   border: 1px solid var(--border-strong);

src/features/plugins/PluginsPage.module.css

@@ -43,7 +43,6 @@
 }
 .body {
   display: flex;
-  min-width: 640px;
   flex: 1;
   min-height: 0;
   border-radius: var(--radius-small);

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} ${styles.existingPathRow}`}>
+              <div className={styles.pathRow}>
                 <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: 150px minmax(0, 1fr);
+  grid-template-columns: minmax(150px, max-content) minmax(0, 1fr);
   min-height: 300px;
 }
 .kinds {
@@ -174,6 +174,7 @@
   color: var(--fg);
   font: inherit;
   text-align: left;
+  white-space: nowrap;
 }
 .kindOn {
   background: var(--bg-list-selected);
@@ -187,12 +188,14 @@
 }
 .radios {
   display: flex;
-  gap: 16px;
+  flex-wrap: wrap;
+  gap: 6px 16px;
 }
 .radio {
   display: inline-flex;
   align-items: center;
   gap: 6px;
+  white-space: nowrap;
 }
 .pathRow {
   display: flex;
@@ -201,7 +204,7 @@
   flex: 1;
   min-width: 0;
 }
-.existingPathRow {
+.form > .pathRow {
   flex: none;
 }
 .pathInput {
@@ -212,7 +215,7 @@
 /* Project Structure */
 .structure {
   display: grid;
-  grid-template-columns: minmax(240px, 1fr) 220px;
+  grid-template-columns: minmax(0, 1fr) 220px;
   gap: 10px;
   min-height: 420px;
 }
@@ -418,7 +421,7 @@
 }
 .splitLayout {
   display: grid;
-  grid-template-columns: 268px minmax(300px, 1fr);
+  grid-template-columns: 268px minmax(0, 1fr);
   gap: 12px;
   min-height: 360px;
 }

src/features/settings/pages/Deployment.module.css

@@ -1,6 +1,6 @@
 .layout {
   display: grid;
-  grid-template-columns: 200px minmax(220px, 1fr);
+  grid-template-columns: 200px minmax(0, 1fr);
   gap: 14px;
   align-items: start;
 }

src/features/settings/pages/editor/Editor.module.css

@@ -176,7 +176,7 @@
 }
 .schemeBody {
   display: grid;
-  grid-template-columns: minmax(180px, 1fr) minmax(220px, 260px);
+  grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
   gap: 14px;
   min-height: 320px;
 }

src/features/settings/pages/editor/Inspections.module.css

@@ -27,7 +27,6 @@
 }
 .split {
   flex: 1;
-  min-width: 520px;
   min-height: 0;
   display: flex;
   gap: 12px;

src/features/templates/settings/Settings.module.css

@@ -14,7 +14,6 @@
 }
 .split {
   flex: 1;
-  min-width: 520px;
   min-height: 320px;
   display: flex;
   border: 1px solid var(--border-strong);

src/features/tools/LanguageServersPage.module.css

@@ -13,7 +13,6 @@
 }
 .body {
   display: flex;
-  min-width: 600px;
   flex: 1;
   min-height: 0;
   border-radius: var(--radius-small);
@@ -170,7 +169,6 @@
 }
 .header {
   display: flex;
-  flex-wrap: wrap;
   align-items: flex-start;
   gap: 12px;
 }