fix(web): align the MCP server form and the provider dialog corners

The form used an auto-fit grid, so on a wide pane the five fields packed four
to a row, mixed short inputs with taller textareas, and left the last row three
columns empty. Name and Transport now share the first row and every longer field
spans both columns, with the grid capped so the inputs stop stretching.

The provider dialog rounded its border but did not clip its children, so the
header background, the footer, and the list scrollbar painted square over the
top corners. The footer worked around this with its own radius; clipping at the
dialog covers all three.

Author: elkaix

.changeset/web-connectors-form-and-dialog-corners.md

@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-code": patch
+---
+
+Lay the MCP server form out in even rows instead of a ragged grid, and stop the provider manager header and footer from squaring off the dialog corners.

apps/pythinker-web/src/components/ProviderManager.vue

@@ -353,6 +353,9 @@ function statusLabel(status: AppProvider['status']): string {
   max-height: calc(100vh - 80px);
   display: flex;
   flex-direction: column;
+  /* The header, the footer, and the list scrollbar all paint to the dialog
+     edge, so they square off the rounded corners without this. */
+  overflow: hidden;
   font-family: var(--mono);
   box-shadow: 0 8px 32px rgba(0,0,0,0.14);
 }
@@ -578,7 +581,6 @@ function statusLabel(status: AppProvider['status']): string {
   color: var(--faint);
   border-top: 1px solid var(--line2);
   background: var(--panel);
-  border-radius: 0 0 4px 4px;
 }
 
 @media (max-width: 640px) {

apps/pythinker-web/src/components/settings/McpServerForm.vue

@@ -99,23 +99,23 @@ function submit(): void {
           <option value="sse">sse</option>
         </select>
       </label>
-      <label v-if="form.transport === 'stdio'" class="connector-field">
+      <label v-if="form.transport === 'stdio'" class="connector-field connector-field-wide">
         <span class="rlabel">{{ t('settings.connectors.form.command') }}</span>
         <input v-model="form.command" class="page-search" required />
       </label>
-      <label v-if="form.transport === 'stdio'" class="connector-field">
+      <label v-if="form.transport === 'stdio'" class="connector-field connector-field-wide">
         <span class="rlabel">{{ t('settings.connectors.form.args') }}</span>
         <textarea v-model="form.args" class="page-search connector-textarea" :placeholder="t('settings.connectors.form.argsHint')" />
       </label>
-      <label v-if="form.transport === 'stdio'" class="connector-field">
+      <label v-if="form.transport === 'stdio'" class="connector-field connector-field-wide">
         <span class="rlabel">{{ t('settings.connectors.form.env') }}</span>
         <textarea v-model="form.env" class="page-search connector-textarea" :placeholder="t('settings.connectors.form.objectHint')" />
       </label>
-      <label v-else class="connector-field">
+      <label v-else class="connector-field connector-field-wide">
         <span class="rlabel">{{ t('settings.connectors.form.url') }}</span>
         <input v-model="form.url" class="page-search" type="url" required />
       </label>
-      <label v-if="form.transport !== 'stdio'" class="connector-field">
+      <label v-if="form.transport !== 'stdio'" class="connector-field connector-field-wide">
         <span class="rlabel">{{ t('settings.connectors.form.headers') }}</span>
         <textarea v-model="form.headers" class="page-search connector-textarea" :placeholder="t('settings.connectors.form.objectHint')" />
       </label>
@@ -139,11 +139,16 @@ function submit(): void {
   background: var(--panel);
 }
 .connector-fields {
+  /* Two fixed columns, not auto-fit: a pane-wide grid stretches the short
+     fields and leaves a ragged tail row. Name and Transport share the first
+     row; every longer field spans both columns so no row ends half empty. */
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px 12px;
+  max-width: 640px;
 }
 .connector-field { min-width: 0; }
+.connector-field-wide { grid-column: 1 / -1; }
 .connector-field .page-search { margin: 4px 0 0; }
 .connector-textarea {
   min-height: 64px;
@@ -155,4 +160,7 @@ function submit(): void {
   gap: 8px;
   margin-top: 4px;
 }
+@media (max-width: 640px) {
+  .connector-fields { grid-template-columns: 1fr; }
+}
 </style>

apps/pythinker-web/test/connectors-page.test.ts

@@ -87,6 +87,23 @@ describe('ConnectorsPage', () => {
     expect(wrapper.findAll('.connector-remove')).toHaveLength(1);
   });
 
+  it('spans every long field across both form columns', async () => {
+    const wrapper = mountPage();
+
+    await wrapper.get('button.act').trigger('click');
+    const labelOf = (field: ReturnType<typeof wrapper.get>): string => field.get('.rlabel').text();
+    const wide = wrapper.findAll('.connector-field-wide').map(labelOf);
+    const narrow = wrapper
+      .findAll('.connector-field')
+      .filter((field) => !field.classes().includes('connector-field-wide'))
+      .map(labelOf);
+
+    // Name and Transport pair up on the first row; the rest take a full row,
+    // so no row is left half empty.
+    expect(narrow).toEqual(['Name', 'Transport']);
+    expect(wide).toEqual(['Command', 'Arguments', 'Environment (JSON)']);
+  });
+
   it('shows the daemon validation message after a rejected write', () => {
     const wrapper = mountPage({ connectorsError: 'MCP server id must be trimmed' });
 

apps/pythinker-web/test/provider-manager-chrome.test.ts

@@ -0,0 +1,32 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+import { describe, expect, it } from 'vitest';
+
+// The header, the footer, and the provider list all paint their own background
+// to the dialog edge, so a rounded dialog needs to clip them. jsdom applies no
+// scoped-SFC styles, so the rule itself is the contract under test.
+const source = readFileSync(
+  resolve(import.meta.dirname, '../src/components/ProviderManager.vue'),
+  'utf8',
+);
+
+function blockOf(selector: string): string {
+  const start = source.indexOf(`\n${selector} {`);
+  expect(start).toBeGreaterThan(-1);
+  const end = source.indexOf('\n}', start);
+  return source.slice(start, end);
+}
+
+describe('ProviderManager dialog chrome', () => {
+  it('clips its children to the rounded corners', () => {
+    const dialog = blockOf('.dialog');
+
+    expect(dialog).toMatch(/border-radius:\s*4px/);
+    expect(dialog).toMatch(/overflow:\s*hidden/);
+  });
+
+  it('leaves the corner rounding to the dialog instead of the footer', () => {
+    expect(blockOf('.footer-hint')).not.toMatch(/border-radius/);
+  });
+});