Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-08 22:39:36 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat(settings): update MCP server card layout and styling

Browse Source 
- 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.
This commit is contained in:
kangfenmao 2025-09-22 20:24:54 +08:00
parent cc650b58d3
commit 3b34efd33a
2 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx
View File

@ -183,6 +183,7 @@ const CardContainer = styled.div<{ $isActive: boolean }>`
margin-bottom: 5px; margin-bottom: 5px;
height: 125px; height: 125px;
opacity: ${(props) => (props.$isActive ? 1 : 0.6)}; opacity: ${(props) => (props.$isActive ? 1 : 0.6)};
width: calc(100vw - var(--settings-width) - 40px);
&:hover { &:hover {
opacity: 1; opacity: 1;

4
src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx
View File

@ -249,7 +249,9 @@ const McpServersList: FC = () => {
items={filteredMcpServers} items={filteredMcpServers}
itemKey="id" itemKey="id"
onSortEnd={onSortEnd} onSortEnd={onSortEnd}
layout="grid" layout="list"
horizontal={false}
listStyle={{ display: 'flex', flexDirection: 'column' }}
gap="12px" gap="12px"
restrictions={{ scrollableAncestor: true }} restrictions={{ scrollableAncestor: true }}
useDragOverlay useDragOverlay