diff --git a/e2e/settingsPaneLayout.spec.ts b/e2e/settingsPaneLayout.spec.ts new file mode 100644 index 000000000..964ae99f1 --- /dev/null +++ b/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); + } +}); diff --git a/src/features/agents/BuiltinAgents.module.css b/src/features/agents/BuiltinAgents.module.css index 9744470fc..6a8001bb4 100644 --- a/src/features/agents/BuiltinAgents.module.css +++ b/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); diff --git a/src/features/plugins/PluginsPage.module.css b/src/features/plugins/PluginsPage.module.css index b61a4f781..6d1e5b97a 100644 --- a/src/features/plugins/PluginsPage.module.css +++ b/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); diff --git a/src/features/settings/languages/Sdk.module.css b/src/features/settings/languages/Sdk.module.css index decf5f3a5..60da92778 100644 --- a/src/features/settings/languages/Sdk.module.css +++ b/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; } diff --git a/src/features/settings/pages/Deployment.module.css b/src/features/settings/pages/Deployment.module.css index c154f84f0..6acb71f27 100644 --- a/src/features/settings/pages/Deployment.module.css +++ b/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; } diff --git a/src/features/settings/pages/editor/Editor.module.css b/src/features/settings/pages/editor/Editor.module.css index 513591e0d..1146b6435 100644 --- a/src/features/settings/pages/editor/Editor.module.css +++ b/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; } diff --git a/src/features/settings/pages/editor/Inspections.module.css b/src/features/settings/pages/editor/Inspections.module.css index db6a431bc..c18743956 100644 --- a/src/features/settings/pages/editor/Inspections.module.css +++ b/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; diff --git a/src/features/templates/settings/Settings.module.css b/src/features/templates/settings/Settings.module.css index a92eba9fd..662c046b9 100644 --- a/src/features/templates/settings/Settings.module.css +++ b/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); diff --git a/src/features/tools/LanguageServersPage.module.css b/src/features/tools/LanguageServersPage.module.css index 1c1eff93e..ab20b9d7d 100644 --- a/src/features/tools/LanguageServersPage.module.css +++ b/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; }