From 3b34efd33af24e1271f1f198a8fbfec5dcadd684 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Mon, 22 Sep 2025 20:24:54 +0800
Subject: [PATCH] feat(settings): update MCP server card layout and styling

- Adjusted the width of the CardContainer to dynamically calculate based on viewport width.
- Changed the layout of the McpServersList from grid to list, with a vertical orientation and updated styling for list items.
---
 src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx | 1 +
 .../src/pages/settings/MCPSettings/McpServersList.tsx         | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx b/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx
index 518849d4f0..3d38255bf5 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx
@@ -183,6 +183,7 @@ const CardContainer = styled.div<{ $isActive: boolean }>`
   margin-bottom: 5px;
   height: 125px;
   opacity: ${(props) => (props.$isActive ? 1 : 0.6)};
+  width: calc(100vw - var(--settings-width) - 40px);
 
   &:hover {
     opacity: 1;
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx b/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx
index 67ae6231a8..7e18af264d 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx
@@ -249,7 +249,9 @@ const McpServersList: FC = () => {
         items={filteredMcpServers}
         itemKey="id"
         onSortEnd={onSortEnd}
-        layout="grid"
+        layout="list"
+        horizontal={false}
+        listStyle={{ display: 'flex', flexDirection: 'column' }}
         gap="12px"
         restrictions={{ scrollableAncestor: true }}
         useDragOverlay