From 8d68a527a01b573d4cbe2865767666a7fb6165ac Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Tue, 21 Jul 2026 12:09:31 +0800
Subject: [PATCH] fix(settings): stabilize MCP permission layout

---
 .../editor/EditorSettingsDialog.vue           | 19 +++++++++++++------
 .../__tests__/mcp/mcpPolicySelection.spec.ts  | 12 ++++++++++++
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/apps/desktop/src/components/editor/EditorSettingsDialog.vue b/apps/desktop/src/components/editor/EditorSettingsDialog.vue
index 7b968df1c..b93f33730 100644
--- a/apps/desktop/src/components/editor/EditorSettingsDialog.vue
+++ b/apps/desktop/src/components/editor/EditorSettingsDialog.vue
@@ -4924,12 +4924,19 @@ onUnmounted(cleanupPreviewEditor);
                       </label>
                     </div>
                   </fieldset>
-                  <p class="flex items-start gap-1.5 text-xs" :class="mcpExecutionMode === 'high_risk_write' ? 'text-amber-600 dark:text-amber-400' : 'text-muted-foreground'">
-                    <AlertTriangle v-if="mcpExecutionMode === 'high_risk_write'" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
-                    <span v-if="mcpExecutionMode === 'read_only'">{{ t("settings.mcpExecutionModeReadOnlyDescription") }}</span>
-                    <span v-else-if="mcpExecutionMode === 'safe_write'">{{ t("settings.mcpExecutionModeSafeWriteDescription") }}</span>
-                    <span v-else>{{ t("settings.mcpExecutionModeHighRiskWriteDescription") }}</span>
-                  </p>
+                  <!-- Keep every translation in one grid cell so mode changes cannot reflow the capability matrix. -->
+                  <div data-mcp-execution-mode-description class="grid text-xs">
+                    <p class="col-start-1 row-start-1 text-muted-foreground" :class="mcpExecutionMode === 'read_only' ? 'visible' : 'invisible'">
+                      {{ t("settings.mcpExecutionModeReadOnlyDescription") }}
+                    </p>
+                    <p class="col-start-1 row-start-1 text-muted-foreground" :class="mcpExecutionMode === 'safe_write' ? 'visible' : 'invisible'">
+                      {{ t("settings.mcpExecutionModeSafeWriteDescription") }}
+                    </p>
+                    <p class="col-start-1 row-start-1 flex items-start gap-1.5 text-amber-600 dark:text-amber-400" :class="mcpExecutionMode === 'high_risk_write' ? 'visible' : 'invisible'">
+                      <AlertTriangle class="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                      <span>{{ t("settings.mcpExecutionModeHighRiskWriteDescription") }}</span>
+                    </p>
+                  </div>
                   <div class="space-y-1.5">
                     <div class="space-y-0.5">
                       <p class="text-xs font-medium">{{ t("settings.mcpCapabilityTitle") }}</p>
diff --git a/apps/desktop/src/lib/__tests__/mcp/mcpPolicySelection.spec.ts b/apps/desktop/src/lib/__tests__/mcp/mcpPolicySelection.spec.ts
index 94fb084ff..a72b0249d 100644
--- a/apps/desktop/src/lib/__tests__/mcp/mcpPolicySelection.spec.ts
+++ b/apps/desktop/src/lib/__tests__/mcp/mcpPolicySelection.spec.ts
@@ -91,6 +91,18 @@ describe("MCP policy settings state", () => {
     expect(loadingStart).toBeLessThan(policyLoad);
     expect(loadingEnd).toBeGreaterThan(policyLoad);
   });
+
+  it("keeps translated mode descriptions in one responsive layout track", () => {
+    const descriptionStart = settingsDialogSource.indexOf("data-mcp-execution-mode-description");
+    const descriptionEnd = settingsDialogSource.indexOf("settings.mcpCapabilityTitle", descriptionStart);
+    const descriptionSource = settingsDialogSource.slice(descriptionStart, descriptionEnd);
+
+    expect(descriptionStart).toBeGreaterThan(-1);
+    expect(descriptionEnd).toBeGreaterThan(descriptionStart);
+    expect(descriptionSource).toContain('class="grid text-xs"');
+    expect(descriptionSource.match(/col-start-1 row-start-1/g)).toHaveLength(3);
+    expect(descriptionSource.match(/\? 'visible' : 'invisible'/g)).toHaveLength(3);
+  });
 });
 
 describe("MCP connection search", () => {