d8dfun/claude-code-chat
1
0
Fork 0
mirror of https://github.com/andrepimenta/claude-code-chat.git synced 2025-12-18 23:29:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

MCP Servers UI

Browse Source
This commit is contained in:
andrepimenta
2025-07-11 22:39:48 +01:00
parent cf46551f00
commit 03b0eb96fe
2 changed files with 82 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/ui-styles.ts
View File

@@ -1622,12 +1622,13 @@ const styles = `
.tools-modal-content {
background-color: var(--vscode-editor-background);
border: 1px solid var(--vscode-panel-border);
border-radius: 6px;
width: 500px;
max-height: 600px;
border-radius: 8px;
width: 700px;
max-width: 90vw;
max-height: 80vh;
display: flex;
flex-direction: column;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.tools-modal-header {
@@ -1667,6 +1668,30 @@ const styles = `
overflow-y: auto;
}
/* MCP Modal content area improvements */
#mcpModal * {
box-sizing: border-box;
}
#mcpModal .tools-list {
padding: 24px;
max-height: calc(80vh - 120px);
overflow-y: auto;
width: 100%;
}
#mcpModal .mcp-servers-list {
padding: 0;
}
#mcpModal .mcp-add-server {
padding: 0;
}
#mcpModal .mcp-add-form {
padding: 12px;
}
.tool-item {
display: flex;
align-items: flex-start;
@@ -2310,20 +2335,26 @@ const styles = `
/* MCP Servers styles */
.mcp-servers-list {
margin-bottom: 20px;
max-height: 400px;
max-height: 500px;
overflow-y: auto;
padding: 4px;
}
.mcp-server-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
padding: 20px 24px;
border: 1px solid var(--vscode-panel-border);
border-radius: 6px;
margin-bottom: 8px;
border-radius: 8px;
margin-bottom: 16px;
background-color: var(--vscode-editor-background);
transition: all 0.2s ease;
}
.mcp-server-item:hover {
border-color: var(--vscode-focusBorder);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.server-info {
@@ -2332,33 +2363,35 @@ const styles = `
.server-name {
font-weight: 600;
font-size: 14px;
font-size: 16px;
color: var(--vscode-foreground);
margin-bottom: 4px;
margin-bottom: 8px;
}
.server-type {
display: inline-block;
background-color: var(--vscode-badge-background);
color: var(--vscode-badge-foreground);
padding: 2px 6px;
padding: 4px 8px;
border-radius: 4px;
font-size: 10px;
font-size: 11px;
font-weight: 500;
margin-bottom: 4px;
margin-bottom: 8px;
}
.server-config {
font-size: 12px;
font-size: 13px;
color: var(--vscode-descriptionForeground);
opacity: 0.8;
opacity: 0.9;
line-height: 1.4;
}
.server-delete-btn {
padding: 4px 8px;
font-size: 12px;
padding: 8px 16px;
font-size: 13px;
color: var(--vscode-errorForeground);
border-color: var(--vscode-errorForeground);
min-width: 80px;
}
.server-delete-btn:hover {
@@ -2368,19 +2401,26 @@ const styles = `
.mcp-add-server {
text-align: center;
margin-bottom: 20px;
margin-bottom: 24px;
padding: 0 4px;
}
.mcp-add-form {
background-color: var(--vscode-editor-background);
border: 1px solid var(--vscode-panel-border);
border-radius: 6px;
padding: 16px;
margin-top: 16px;
border-radius: 8px;
padding: 24px;
margin-top: 20px;
max-height: 400px;
overflow-y: auto;
box-sizing: border-box;
width: 100%;
}
.form-group {
margin-bottom: 16px;
margin-bottom: 20px;
box-sizing: border-box;
width: 100%;
}
.form-group label {
@@ -2395,6 +2435,7 @@ const styles = `
.form-group select,
.form-group textarea {
width: 100%;
max-width: 100%;
padding: 8px 12px;
border: 1px solid var(--vscode-input-border);
border-radius: 4px;
@@ -2402,6 +2443,8 @@ const styles = `
color: var(--vscode-input-foreground);
font-size: 13px;
font-family: var(--vscode-font-family);
box-sizing: border-box;
resize: vertical;
}
.form-group input:focus,