diff --git a/web/src/api/normalizers.test.mjs b/web/src/api/normalizers.test.mjs index bd79e68..4f8b379 100644 --- a/web/src/api/normalizers.test.mjs +++ b/web/src/api/normalizers.test.mjs @@ -116,6 +116,30 @@ test('agent editor copy reflects preview and draft editing, not readonly-only mo assert.match(source, /字段预览与草稿编辑区/) }) +test('layout allows main work areas to stretch on wide browser windows', async () => { + const thisFile = fileURLToPath(import.meta.url) + const stylePath = new URL('../styles.css', `file://${thisFile}`) + const source = await readFile(stylePath, 'utf8') + const projectMinWidth = 280 + 0 + 310 + 16 * 2 + const commonLaptopContentWidth = 1366 - 28 * 2 + const twoColumnMinWidth = Math.max(720 + 340 + 16, 330 + 720 + 16) + const responsiveBreakpoint = 1140 + + assert.doesNotMatch(source, /\.app-shell\s*\{[^}]*width:\s*min\(1440px,\s*100%\)/s) + assert.match(source, /\.app-shell\s*\{[^}]*width:\s*100%/s) + assert.doesNotMatch(source, /\.app-shell\s*\{[^}]*max-width:/s) + assert.match(source, /\.project-layout\s*\{[^}]*grid-template-columns:\s*280px minmax\(0,\s*1fr\) 310px/s) + assert.match(source, /\.matrix-table\s*\{[^}]*overflow-x:\s*auto/s) + assert.match(source, /\.matrix-row\s*\{[^}]*min-width:\s*920px/s) + assert.match(source, /\.workflow-layout\s*\{[^}]*grid-template-columns:\s*minmax\(720px,\s*1fr\) 340px/s) + assert.match(source, /\.agent-layout\s*\{[^}]*grid-template-columns:\s*330px minmax\(720px,\s*1fr\)/s) + assert.match(source, /\.drafts-layout\s*\{[^}]*grid-template-columns:\s*minmax\(720px,\s*1fr\) 340px/s) + assert.match(source, /\.settings-layout\s*\{[^}]*max-width:\s*1440px/s) + assert.match(source, /@media\s*\(max-width:\s*1140px\)\s*\{[^}]*\.project-layout,[^}]*\.workflow-layout,[^}]*\.agent-layout,[^}]*\.drafts-layout,[^}]*\.settings-layout\s*\{[^}]*grid-template-columns:\s*1fr/s) + assert.ok(projectMinWidth <= commonLaptopContentWidth) + assert.ok(twoColumnMinWidth <= responsiveBreakpoint - 28 * 2) +}) + test('normalizes empty runtime without falling back to fake real data', () => { const runtime = normalizeRuntime({ items: [], diff --git a/web/src/styles.css b/web/src/styles.css index 57167ec..3263b0e 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -47,7 +47,7 @@ button { } .app-shell { - width: min(1440px, 100%); + width: 100%; margin: 0 auto; padding: 28px; } @@ -446,7 +446,7 @@ button { .workflow-layout { display: grid; - grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); + grid-template-columns: minmax(720px, 1fr) 340px; gap: 16px; align-items: start; } @@ -594,7 +594,7 @@ button { .agent-layout { display: grid; - grid-template-columns: 330px minmax(0, 1fr); + grid-template-columns: 330px minmax(720px, 1fr); gap: 16px; align-items: start; } @@ -753,12 +753,20 @@ button { white-space: pre-wrap; } -.drafts-layout, +.drafts-layout { + display: grid; + grid-template-columns: minmax(720px, 1fr) 340px; + gap: 16px; + align-items: start; +} + .settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; + max-width: 1440px; + margin: 0 auto; } .draft-list, @@ -862,7 +870,7 @@ button { line-height: 1.6; } -@media (max-width: 1120px) { +@media (max-width: 1140px) { .workspace-header, .project-layout, .workflow-layout,