diff --git a/docs-site/public/pr-screenshots/models-tabs-layout-drift-fixed.png b/docs-site/public/pr-screenshots/models-tabs-layout-drift-fixed.png new file mode 100644 index 0000000000..2040c073a7 Binary files /dev/null and b/docs-site/public/pr-screenshots/models-tabs-layout-drift-fixed.png differ diff --git a/gui/src/styles-models-workspace.css b/gui/src/styles-models-workspace.css index 73c4901a12..b6ab815cee 100644 --- a/gui/src/styles-models-workspace.css +++ b/gui/src/styles-models-workspace.css @@ -8,14 +8,17 @@ /* The catalog wants a wider column than the 980px default. - Scoped to a VISIBLE catalog panel, not merely a present one: panels mount lazily and - then stay mounted so drafts survive a tab hop, so a bare `:has(.models-workspace-shell)` - keeps matching after the catalog has been opened once. Routing would then render at - 980px on a direct visit and 1200px afterwards — a width that depends on browsing - history. No surface renders the shell outside a tabpanel any more, so the old - direct-child arm is gone with the standalone pages it served. + Scoped to a VISIBLE catalog or routing panel, not merely a present one: panels mount + lazily and then stay mounted so drafts survive a tab hop, so a bare + `:has(.models-workspace-shell)` keeps matching after the catalog has been opened once. + Routing must share the catalog's 1200px page width or switching between those tabs + shifts the content horizontally. No surface renders the shell outside a tabpanel any + more, so the old direct-child arm is gone with the standalone pages it served. */ -.main-inner:has(#models-panel-catalog:not([hidden]) .models-workspace-shell) { +.main-inner:has( + #models-panel-catalog:not([hidden]), + #models-panel-routing:not([hidden]) +) { max-width: 1200px; } diff --git a/gui/tests/models-provider-head.test.ts b/gui/tests/models-provider-head.test.ts index bfa33beb0b..47ea2867f9 100644 --- a/gui/tests/models-provider-head.test.ts +++ b/gui/tests/models-provider-head.test.ts @@ -31,6 +31,17 @@ test("Models workspace stacks via content-width container query before mobile dr expect(css).toContain("@media (max-width: 768px)"); }); +test("Models catalog and routing tabs keep the same wide page width", async () => { + const css = await Bun.file(new URL("../src/styles-models-workspace.css", import.meta.url)).text(); + + // Both panels stay mounted after first visit, so the width rule must follow the + // visible panel rather than the catalog shell's historical presence in the DOM. + expect(css).toMatch( + /\.main-inner:has\(\s*#models-panel-catalog:not\(\[hidden\]\),\s*#models-panel-routing:not\(\[hidden\]\)\s*\)\s*\{\s*max-width:\s*1200px;/s, + ); + expect(css).not.toContain("#models-panel-catalog:not([hidden]) .models-workspace-shell"); +}); + test("Models exposes provider and per-model context-window controls (#1073)", async () => { const page = await Bun.file(new URL("../src/pages/Models.tsx", import.meta.url)).text(); const groups = await Bun.file(new URL("../src/models-groups.ts", import.meta.url)).text();