fix(settings): preserve both panes in compact windows (#2115)

e2e/settingsPaneLayout.spec.ts

@@ -0,0 +1,98 @@
+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,5 +1,6 @@
 .split {
   display: flex;
+  min-width: 640px;
   flex: none;
   min-height: 320px;
   border: 1px solid var(--border-strong);

src/features/plugins/PluginsPage.module.css

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

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

@@ -219,7 +219,7 @@
 /* Project Structure */
 .structure {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 220px;
+  grid-template-columns: minmax(240px, 1fr) 220px;
   gap: 10px;
   min-height: 420px;
 }
@@ -425,7 +425,7 @@
 }
 .splitLayout {
   display: grid;
-  grid-template-columns: 268px minmax(0, 1fr);
+  grid-template-columns: 268px minmax(300px, 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(0, 1fr);
+  grid-template-columns: 200px minmax(220px, 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(0, 1fr) minmax(220px, 260px);
+  grid-template-columns: minmax(180px, 1fr) minmax(220px, 260px);
   gap: 14px;
   min-height: 320px;
 }

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

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

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

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

src/features/tools/LanguageServersPage.module.css

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