fix: stretch main work areas responsively

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: [],

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,