Feat: Place the new mcp button at the end of the line. #10427 (#11170)

### What problem does this PR solve?

Feat: Place the new mcp button at the end of the line. #10427

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/user-setting/mcp/edit-mcp-dialog.tsx

@@ -124,7 +124,7 @@ export function EditMcpDialog({
           form={form}
           setFieldChanged={setFieldChanged}
         ></EditMcpForm>
-        <Card>
+        <Card className="bg-transparent">
           <CardContent className="p-3">
             <Collapse
               title={

web/src/pages/user-setting/mcp/index.tsx

@@ -59,7 +59,7 @@ export default function McpServer() {
     <ProfileSettingWrapperCard
       header={
         <>
-          <div className="text-text-primary text-2xl font-medium">
+          <div className="text-text-primary text-2xl font-semibold">
             {t('mcp.mcpServers')}
           </div>
           <section className="flex items-center justify-between">
@@ -80,13 +80,13 @@ export default function McpServer() {
                 )}
                 {t(`mcp.${isSelectionMode ? 'exitBulkManage' : 'bulkManage'}`)}
               </Button>
-              <Button variant={'secondary'} onClick={showEditModal('')}>
-                <Plus className="size-3.5" /> {t('mcp.addMCP')}
-              </Button>
-              <Button onClick={showImportModal}>
+              <Button variant={'secondary'} onClick={showImportModal}>
                 <Download className="size-3.5" />
                 {t('mcp.import')}
               </Button>
+              <Button onClick={showEditModal('')}>
+                <Plus className="size-3.5" /> {t('mcp.addMCP')}
+              </Button>
             </div>
           </section>
         </>