Feat: Change the style of all cards according to the design #10703 (#10704)

### What problem does this PR solve?

Feat: Change the style of all cards according to the design #10703

### Type of change


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

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

@@ -1,4 +1,5 @@
 import { BulkOperateBar } from '@/components/bulk-operate-bar';
+import { CardContainer } from '@/components/card-container';
 import { Button } from '@/components/ui/button';
 import { SearchInput } from '@/components/ui/input';
 import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
@@ -60,7 +61,7 @@ export default function McpServer() {
           className="mb-2.5"
         ></BulkOperateBar>
       )}
-      <section className="flex gap-5 flex-wrap">
+      <CardContainer>
         {data.mcp_servers.map((item) => (
           <McpCard
             key={item.id}
@@ -70,8 +71,8 @@ export default function McpServer() {
             showEditModal={showEditModal}
           ></McpCard>
         ))}
-      </section>
-      <div className="mt-8 px-8">
+      </CardContainer>
+      <div className="mt-8">
         <RAGFlowPagination
           {...pick(pagination, 'current', 'pageSize')}
           total={pagination.total || 0}

web/src/pages/profile-setting/mcp/mcp-card.tsx

@@ -33,7 +33,7 @@ export function McpCard({
     }
   };
   return (
-    <Card key={data.id} className="w-64">
+    <Card key={data.id}>
       <CardContent className="p-2.5 pt-2 group">
         <section className="flex justify-between pb-2">
           <h3 className="text-lg font-semibold truncate flex-1">{data.name}</h3>