From f7f62c36cf8deef5b06848a058d8e3459b9f70c8 Mon Sep 17 00:00:00 2001 From: elkaix Date: Mon, 17 Aug 2026 17:35:49 -0400 Subject: [PATCH 1/4] 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. --- .../web-connectors-form-and-dialog-corners.md | 5 +++ .../src/components/ProviderManager.vue | 4 ++- .../src/components/settings/McpServerForm.vue | 20 ++++++++---- .../test/connectors-page.test.ts | 17 ++++++++++ .../test/provider-manager-chrome.test.ts | 32 +++++++++++++++++++ 5 files changed, 71 insertions(+), 7 deletions(-) create mode 100644 .changeset/web-connectors-form-and-dialog-corners.md create mode 100644 apps/pythinker-web/test/provider-manager-chrome.test.ts diff --git a/.changeset/web-connectors-form-and-dialog-corners.md b/.changeset/web-connectors-form-and-dialog-corners.md new file mode 100644 index 00000000..de9bd004 --- /dev/null +++ b/.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. diff --git a/apps/pythinker-web/src/components/ProviderManager.vue b/apps/pythinker-web/src/components/ProviderManager.vue index e74b2752..2f26e8fa 100644 --- a/apps/pythinker-web/src/components/ProviderManager.vue +++ b/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) { diff --git a/apps/pythinker-web/src/components/settings/McpServerForm.vue b/apps/pythinker-web/src/components/settings/McpServerForm.vue index 5ec4168a..1df7b603 100644 --- a/apps/pythinker-web/src/components/settings/McpServerForm.vue +++ b/apps/pythinker-web/src/components/settings/McpServerForm.vue @@ -99,23 +99,23 @@ function submit(): void { -