From 25c50945a3bb450de4915b3da551122ef889bc95 Mon Sep 17 00:00:00 2001 From: hajune Date: Thu, 3 Sep 2026 13:17:07 +0900 Subject: [PATCH 1/6] fix(combos): stabilize Models tab layout widths --- gui/src/styles-compatibility-matrix.css | 11 ++++++- gui/src/styles-models-workspace.css | 29 +++++++++++++----- gui/src/styles.css | 40 +++++++++++++++++++++++++ 3 files changed, 72 insertions(+), 8 deletions(-) diff --git a/gui/src/styles-compatibility-matrix.css b/gui/src/styles-compatibility-matrix.css index db86e4a89d..38ff9f61f9 100644 --- a/gui/src/styles-compatibility-matrix.css +++ b/gui/src/styles-compatibility-matrix.css @@ -3,7 +3,16 @@ Namespace: lab-matrix- ============================================================================ */ -.main-inner:has(.lab-page) { +/* + Scoped to the VISIBLE compatibility panel by id, not to `.lab-page`: the lab renders no + `.lab-page` while it is loading (skeleton), so a `:has(.lab-page)` test dropped the width + to 980px during load and snapped to 1200px afterwards — the tab's size was not fixed. It + also matched from any tab once the lab had been opened (panels stay mounted), leaking the + width across tabs. `#models-panel-compatibility:not([hidden])` is true only while this is + the active tab, so the width is held steady across load/error and never leaks. Matches the + catalog and routing rules in styles-models-workspace.css. +*/ +.main-inner:has(#models-panel-compatibility:not([hidden])) { max-width: 1200px; box-sizing: border-box; } diff --git a/gui/src/styles-models-workspace.css b/gui/src/styles-models-workspace.css index ab00d41402..e1120eb04c 100644 --- a/gui/src/styles-models-workspace.css +++ b/gui/src/styles-models-workspace.css @@ -8,14 +8,29 @@ /* 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 the VISIBLE catalog panel by its id: `#models-panel-catalog:not([hidden])` is + true only while catalog is the active tab (an inactive panel carries `hidden`), so this + never leaks onto another tab even though panels stay mounted after their first visit. + + It deliberately does NOT also require `.models-workspace-shell`: the shell is absent + while the catalog is loading (skeleton) or after a cold failure (error notice), so gating + on it dropped the width back to 980px in those states and snapped it to 1200px only once + data arrived — the catalog tab's size was not fixed. The panel-id test alone holds the + width steady across load, empty, and error, matching the routing rule below. */ -.main-inner:has(#models-panel-catalog:not([hidden]) .models-workspace-shell) { +.main-inner:has(#models-panel-catalog:not([hidden])) { + max-width: 1200px; +} + +/* + Routing shares the catalog/compatibility 1200px column so hopping between the Models + tabs never resizes the page. Scoped to the VISIBLE routing panel for the same reason + the catalog rule is: panels stay mounted after their first visit, so an unscoped `:has` + would leak this width onto whatever tab is open. Without this rule routing fell back to + the 980px `.main-inner` default — a visible width jump on every hop to it, and one that + only appeared once the compatibility tab's own `:has(.lab-page)` had leaked 1200px in. +*/ +.main-inner:has(#models-panel-routing:not([hidden])) { max-width: 1200px; } diff --git a/gui/src/styles.css b/gui/src/styles.css index 1d321fc843..d7b98bbbef 100644 --- a/gui/src/styles.css +++ b/gui/src/styles.css @@ -450,6 +450,46 @@ input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } } .main-inner.main-inner--combos > .page-sub { margin-bottom: 10px; } +/* Keep the Models tab strip border aligned with its tab buttons in the full-bleed layout. */ +.main-inner.main-inner--combos > .page-tabs { + margin-inline: 36px; + padding-inline: 0; +} + +/* + Full-bleed is for the combos WORKSPACE grid only. Its loading and error fallbacks render + no `.combos-workspace-shell` (Combos.tsx returns a bare skeleton or an error notice), yet + `main-inner--combos` is applied on tab selection alone — so with no workspace to fill, the + lone subtitle/notice/retry stretched edge to edge (padding:0, max-width:none, flex column) + while every sibling Models tab stayed boxed. That is the "콤보만 영역이 이상해짐" report. + + When no workspace shell is present, drop the full-bleed and box the page like the other + tabs: reset the container, its chrome inset, and the fill panel back to normal flow. +*/ +/* + Each rule below is a SINGLE selector on purpose. Vite's Rolldown CSS minifier corrupts a + comma-separated selector list whose selectors carry `:not(:has(...))` — it emits a stray + `)` before the block and the browser then drops the whole rule. A single `:not(:has())` + selector minifies correctly, so the chrome inset is handled without a list: the container + drops its own horizontal padding and the page chrome keeps the 36px inline padding it + already gets above (`.main-inner--combos > .page-head` etc.), which the panel matches. +*/ +.main-inner.main-inner--combos:not(:has(.combos-workspace-shell)) { + max-width: 1200px; + margin: 0 auto; + padding: 32px 0 64px; + min-height: 0; + height: auto; + overflow: visible; + display: block; +} +.main-inner.main-inner--combos:not(:has(.combos-workspace-shell)) > .models-tab-panel--fill:not([hidden]) { + flex: 0 1 auto; + height: auto; + display: block; + padding-inline: 36px; +} + /* ---- page header ---- */ .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; } .page-head h2 { font-size: var(--text-title); } From 56f17571001265a865879420a3e4b1bfe7d10793 Mon Sep 17 00:00:00 2001 From: hajune Date: Thu, 3 Sep 2026 13:57:19 +0900 Subject: [PATCH 2/6] test(gui): cover Models tab layout boundaries --- gui/tests/models-tab-layout.test.ts | 39 +++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 gui/tests/models-tab-layout.test.ts diff --git a/gui/tests/models-tab-layout.test.ts b/gui/tests/models-tab-layout.test.ts new file mode 100644 index 0000000000..c40e818151 --- /dev/null +++ b/gui/tests/models-tab-layout.test.ts @@ -0,0 +1,39 @@ +import { expect, test } from "bun:test"; +import { effectiveDeclaration, withoutComments } from "./helpers/css-declarations"; + +async function readStylesheet(path: string): Promise { + return withoutComments(await Bun.file(new URL(path, import.meta.url)).text()); +} + +test("Models tab strips keep their full-bleed container borders aligned", async () => { + const baseStyles = await readStylesheet("../src/styles.css"); + const workspaceStyles = await readStylesheet("../src/styles-models-workspace.css"); + const compatibilityStyles = await readStylesheet("../src/styles-compatibility-matrix.css"); + + // The Combos workspace removes the outer container padding. Replacing the tab strip's + // padding with an equal inline margin keeps its border aligned with the tab buttons. + expect(effectiveDeclaration( + baseStyles, + ".main-inner.main-inner--combos > .page-tabs", + "margin-inline", + )).toBe("36px"); + expect(effectiveDeclaration( + baseStyles, + ".main-inner.main-inner--combos > .page-tabs", + "padding-inline", + )).toBe("0"); + + // Every Models workspace tab uses the same column width, including loading/error states + // where the panel content itself may not have mounted yet. + for (const selector of [ + ".main-inner:has(#models-panel-catalog:not([hidden]))", + ".main-inner:has(#models-panel-routing:not([hidden]))", + ]) { + expect(effectiveDeclaration(workspaceStyles, selector, "max-width")).toBe("1200px"); + } + expect(effectiveDeclaration( + compatibilityStyles, + ".main-inner:has(#models-panel-compatibility:not([hidden]))", + "max-width", + )).toBe("1200px"); +}); From d396af463c0370e9d8c80461d61b6c17d108f873 Mon Sep 17 00:00:00 2001 From: hajune Date: Thu, 3 Sep 2026 14:09:28 +0900 Subject: [PATCH 3/6] test(gui): cover shell-free combos fallbacks --- gui/tests/models-tab-layout.test.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/gui/tests/models-tab-layout.test.ts b/gui/tests/models-tab-layout.test.ts index c40e818151..f1d203dc41 100644 --- a/gui/tests/models-tab-layout.test.ts +++ b/gui/tests/models-tab-layout.test.ts @@ -23,6 +23,18 @@ test("Models tab strips keep their full-bleed container borders aligned", async "padding-inline", )).toBe("0"); + // Loading, empty, and error fallbacks do not render the workspace shell. Keep those + // shell-free states boxed instead of allowing the full-bleed Combos container to stretch + // their notice and retry controls edge to edge. + const shellFreeContainer = ".main-inner.main-inner--combos:not(:has(.combos-workspace-shell))"; + expect(effectiveDeclaration(baseStyles, shellFreeContainer, "max-width")).toBe("1200px"); + expect(effectiveDeclaration(baseStyles, shellFreeContainer, "margin")).toBe("0 auto"); + expect(effectiveDeclaration(baseStyles, shellFreeContainer, "padding")).toBe("32px 0 64px"); + + const shellFreePanel = `${shellFreeContainer} > .models-tab-panel--fill:not([hidden])`; + expect(effectiveDeclaration(baseStyles, shellFreePanel, "display")).toBe("block"); + expect(effectiveDeclaration(baseStyles, shellFreePanel, "padding-inline")).toBe("36px"); + // Every Models workspace tab uses the same column width, including loading/error states // where the panel content itself may not have mounted yet. for (const selector of [ From 06d4d3fc2d0b328294ab3b12037cbfb7d42924aa Mon Sep 17 00:00:00 2001 From: hajune Date: Thu, 3 Sep 2026 14:56:07 +0900 Subject: [PATCH 4/6] fix(gui): align mobile combos tab spacing --- gui/src/styles.css | 4 ++++ gui/tests/models-tab-layout.test.ts | 14 +++++++------- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/gui/src/styles.css b/gui/src/styles.css index d7b98bbbef..390d3c1a12 100644 --- a/gui/src/styles.css +++ b/gui/src/styles.css @@ -2365,6 +2365,10 @@ button.prov-account-row.active { cursor: default; } .main-inner.main-inner--combos > .page-head, .main-inner.main-inner--combos > .page-tabs, .main-inner.main-inner--combos > .page-sub { padding-inline: 18px; } + .main-inner.main-inner--combos > .page-tabs { + margin-inline: 18px; + padding-inline: 0; + } /* settings rows: copy takes the full width, controls drop underneath */ .setting-row { flex-wrap: wrap; } .setting-row .setting-copy { flex: 1 1 100% !important; } diff --git a/gui/tests/models-tab-layout.test.ts b/gui/tests/models-tab-layout.test.ts index f1d203dc41..3d2c4efb70 100644 --- a/gui/tests/models-tab-layout.test.ts +++ b/gui/tests/models-tab-layout.test.ts @@ -1,5 +1,5 @@ import { expect, test } from "bun:test"; -import { effectiveDeclaration, withoutComments } from "./helpers/css-declarations"; +import { effectiveDeclaration, ruleBodies, withoutComments } from "./helpers/css-declarations"; async function readStylesheet(path: string): Promise { return withoutComments(await Bun.file(new URL(path, import.meta.url)).text()); @@ -12,16 +12,16 @@ test("Models tab strips keep their full-bleed container borders aligned", async // The Combos workspace removes the outer container padding. Replacing the tab strip's // padding with an equal inline margin keeps its border aligned with the tab buttons. + const tabStripSelector = ".main-inner.main-inner--combos > .page-tabs"; + const tabStripBodies = ruleBodies(baseStyles, tabStripSelector); + expect(tabStripBodies[0]).toMatch(/margin-inline:\s*36px/); + expect(effectiveDeclaration(baseStyles, tabStripSelector, "margin-inline")).toBe("18px"); expect(effectiveDeclaration( baseStyles, - ".main-inner.main-inner--combos > .page-tabs", - "margin-inline", - )).toBe("36px"); - expect(effectiveDeclaration( - baseStyles, - ".main-inner.main-inner--combos > .page-tabs", + tabStripSelector, "padding-inline", )).toBe("0"); + expect(tabStripBodies.at(-1)).toMatch(/padding-inline:\s*0/); // Loading, empty, and error fallbacks do not render the workspace shell. Keep those // shell-free states boxed instead of allowing the full-bleed Combos container to stretch From ac86e1ce959f75f1d2cc6e2833ef34a188766bb7 Mon Sep 17 00:00:00 2001 From: hajune Date: Thu, 3 Sep 2026 15:00:54 +0900 Subject: [PATCH 5/6] fix(gui): align mobile combos fallback panel --- gui/src/styles.css | 3 +++ gui/tests/models-tab-layout.test.ts | 3 ++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/gui/src/styles.css b/gui/src/styles.css index 390d3c1a12..48629ee452 100644 --- a/gui/src/styles.css +++ b/gui/src/styles.css @@ -2369,6 +2369,9 @@ button.prov-account-row.active { cursor: default; } margin-inline: 18px; padding-inline: 0; } + .main-inner.main-inner--combos:not(:has(.combos-workspace-shell)) > .models-tab-panel--fill:not([hidden]) { + padding-inline: 0; + } /* settings rows: copy takes the full width, controls drop underneath */ .setting-row { flex-wrap: wrap; } .setting-row .setting-copy { flex: 1 1 100% !important; } diff --git a/gui/tests/models-tab-layout.test.ts b/gui/tests/models-tab-layout.test.ts index 3d2c4efb70..a7f6ac5d2c 100644 --- a/gui/tests/models-tab-layout.test.ts +++ b/gui/tests/models-tab-layout.test.ts @@ -33,7 +33,8 @@ test("Models tab strips keep their full-bleed container borders aligned", async const shellFreePanel = `${shellFreeContainer} > .models-tab-panel--fill:not([hidden])`; expect(effectiveDeclaration(baseStyles, shellFreePanel, "display")).toBe("block"); - expect(effectiveDeclaration(baseStyles, shellFreePanel, "padding-inline")).toBe("36px"); + expect(ruleBodies(baseStyles, shellFreePanel)[0]).toMatch(/padding-inline:\s*36px/); + expect(effectiveDeclaration(baseStyles, shellFreePanel, "padding-inline")).toBe("0"); // Every Models workspace tab uses the same column width, including loading/error states // where the panel content itself may not have mounted yet. From 5ce40a1501cd4486d897cc77d592bdcd76773a0c Mon Sep 17 00:00:00 2001 From: hajune Date: Thu, 3 Sep 2026 15:04:51 +0900 Subject: [PATCH 6/6] fix(gui): normalize mobile combos fallback spacing --- gui/src/styles.css | 15 +++++++++++++++ gui/tests/models-tab-layout.test.ts | 12 +++++++++++- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/gui/src/styles.css b/gui/src/styles.css index 48629ee452..c39a0c82ce 100644 --- a/gui/src/styles.css +++ b/gui/src/styles.css @@ -2372,6 +2372,21 @@ button.prov-account-row.active { cursor: default; } .main-inner.main-inner--combos:not(:has(.combos-workspace-shell)) > .models-tab-panel--fill:not([hidden]) { padding-inline: 0; } + .main-inner.main-inner--combos:not(:has(.combos-workspace-shell)) { + padding: 22px 18px 48px; + } + .main-inner.main-inner--combos:not(:has(.combos-workspace-shell)) > .page-head { + padding-inline: 0; + } + .main-inner.main-inner--combos:not(:has(.combos-workspace-shell)) > .page-tabs { + padding-inline: 0; + } + .main-inner.main-inner--combos:not(:has(.combos-workspace-shell)) > .page-sub { + padding-inline: 0; + } + .main-inner.main-inner--combos:not(:has(.combos-workspace-shell)) > .page-tabs { + margin-inline: 0; + } /* settings rows: copy takes the full width, controls drop underneath */ .setting-row { flex-wrap: wrap; } .setting-row .setting-copy { flex: 1 1 100% !important; } diff --git a/gui/tests/models-tab-layout.test.ts b/gui/tests/models-tab-layout.test.ts index a7f6ac5d2c..34bc9941dd 100644 --- a/gui/tests/models-tab-layout.test.ts +++ b/gui/tests/models-tab-layout.test.ts @@ -29,13 +29,23 @@ test("Models tab strips keep their full-bleed container borders aligned", async const shellFreeContainer = ".main-inner.main-inner--combos:not(:has(.combos-workspace-shell))"; expect(effectiveDeclaration(baseStyles, shellFreeContainer, "max-width")).toBe("1200px"); expect(effectiveDeclaration(baseStyles, shellFreeContainer, "margin")).toBe("0 auto"); - expect(effectiveDeclaration(baseStyles, shellFreeContainer, "padding")).toBe("32px 0 64px"); + expect(ruleBodies(baseStyles, shellFreeContainer)[0]).toMatch(/padding:\s*32px 0 64px/); + expect(effectiveDeclaration(baseStyles, shellFreeContainer, "padding")).toBe("22px 18px 48px"); const shellFreePanel = `${shellFreeContainer} > .models-tab-panel--fill:not([hidden])`; expect(effectiveDeclaration(baseStyles, shellFreePanel, "display")).toBe("block"); expect(ruleBodies(baseStyles, shellFreePanel)[0]).toMatch(/padding-inline:\s*36px/); expect(effectiveDeclaration(baseStyles, shellFreePanel, "padding-inline")).toBe("0"); + for (const selector of [ + `${shellFreeContainer} > .page-head`, + `${shellFreeContainer} > .page-tabs`, + `${shellFreeContainer} > .page-sub`, + ]) { + expect(effectiveDeclaration(baseStyles, selector, "padding-inline")).toBe("0"); + } + expect(effectiveDeclaration(baseStyles, `${shellFreeContainer} > .page-tabs`, "margin-inline")).toBe("0"); + // Every Models workspace tab uses the same column width, including loading/error states // where the panel content itself may not have mounted yet. for (const selector of [