fix(settings): stabilize MCP permission layout

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'">
+                  <!-- Keep every translation in one grid cell so mode changes cannot reflow the capability matrix. -->
-                    <AlertTriangle v-if="mcpExecutionMode === 'high_risk_write'" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                  <div data-mcp-execution-mode-description class="grid text-xs">
-                    <span v-if="mcpExecutionMode === 'read_only'">{{ t("settings.mcpExecutionModeReadOnlyDescription") }}</span>
+                    <p class="col-start-1 row-start-1 text-muted-foreground" :class="mcpExecutionMode === 'read_only' ? 'visible' : 'invisible'">
-                    <span v-else-if="mcpExecutionMode === 'safe_write'">{{ t("settings.mcpExecutionModeSafeWriteDescription") }}</span>
+                      {{ t("settings.mcpExecutionModeReadOnlyDescription") }}
-                    <span v-else>{{ t("settings.mcpExecutionModeHighRiskWriteDescription") }}</span>
+                    </p>
-                  </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>

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", () => {