fix: fixes to rendering in the AI chat

This commit is contained in:
2026-05-28 11:21:03 +02:00
parent 721b1ae626
commit b09b14cc03
4 changed files with 53 additions and 23 deletions

11
.claude/launch.json Normal file
View File

@@ -0,0 +1,11 @@
{
"version": "0.0.1",
"configurations": [
{
"name": "phoenix",
"runtimeExecutable": "mix",
"runtimeArgs": ["phx.server"],
"port": 4000
}
]
}

View File

@@ -9,7 +9,13 @@
"Bash(git push *)", "Bash(git push *)",
"Bash(git -C /Users/gb/Projects/bDS2 status)", "Bash(git -C /Users/gb/Projects/bDS2 status)",
"Bash(git status *)", "Bash(git status *)",
"Bash(mix assets.deploy)" "Bash(mix assets.deploy)",
"Bash(mix phx.server)",
"mcp__Claude_Preview__preview_start",
"mcp__Claude_in_Chrome__navigate",
"mcp__Claude_in_Chrome__computer",
"mcp__Claude_in_Chrome__browser_batch",
"mcp__Claude_in_Chrome__javascript_tool"
] ]
} }
} }

View File

@@ -86,10 +86,11 @@
.chat-message { .chat-message {
display: flex; display: flex;
max-width: 100%; max-width: 100%;
margin-bottom: 16px;
} }
.chat-message.user { .chat-message.user {
justify-content: flex-end; flex-direction: row-reverse;
} }
.chat-message-content { .chat-message-content {
@@ -102,10 +103,11 @@
} }
.chat-panel .chat-message.user .chat-message-content { .chat-panel .chat-message.user .chat-message-content {
background: transparent; background: var(--vscode-button-background, var(--accent-color, #007acc));
color: var(--vscode-list-activeSelectionForeground); color: var(--vscode-button-foreground, var(--vscode-list-activeSelectionForeground, #ffffff));
border: 0; border: 1px solid var(--vscode-button-background, var(--accent-color, #007acc));
padding: 6px 12px; border-radius: 6px;
padding: 12px 14px;
line-height: 1.35; line-height: 1.35;
} }
@@ -457,18 +459,18 @@
} }
.chat-panel .chat-input-container { .chat-panel .chat-input-container {
--chat-input-line-height: 20px; --chat-input-line-height: 22px;
--chat-input-min-height: 20px; --chat-input-min-height: 24px;
border-top: 1px solid var(--vscode-panel-border); border-top: 1px solid var(--vscode-panel-border);
padding: 8px 16px; padding: 12px 16px;
background: var(--vscode-sideBar-background); background: var(--vscode-sideBar-background);
} }
.chat-panel .chat-input-wrapper { .chat-panel .chat-input-wrapper {
min-height: 30px; min-height: 40px;
border: 1px solid var(--vscode-input-border); border: 1px solid var(--vscode-input-border);
border-radius: 6px; border-radius: 8px;
padding: 4px 6px; padding: 6px 8px;
background: var(--vscode-input-background); background: var(--vscode-input-background);
} }
@@ -487,11 +489,16 @@
max-height: 160px; max-height: 160px;
resize: vertical; resize: vertical;
border: 0; border: 0;
outline: none;
background: transparent; background: transparent;
color: var(--vscode-input-foreground); color: var(--vscode-input-foreground);
overflow-y: hidden; overflow-y: hidden;
} }
.chat-panel .chat-input:focus {
outline: none;
}
.chat-panel .chat-input::placeholder { .chat-panel .chat-input::placeholder {
color: var(--vscode-input-placeholderForeground); color: var(--vscode-input-placeholderForeground);
} }

View File

@@ -3676,9 +3676,10 @@ button svg, button svg * {
.chat-message { .chat-message {
display: flex; display: flex;
max-width: 100%; max-width: 100%;
margin-bottom: 16px;
} }
.chat-message.user { .chat-message.user {
justify-content: flex-end; flex-direction: row-reverse;
} }
.chat-message-content { .chat-message-content {
max-width: min(760px, 100%); max-width: min(760px, 100%);
@@ -3689,10 +3690,11 @@ button svg, button svg * {
color: var(--vscode-editor-foreground); color: var(--vscode-editor-foreground);
} }
.chat-panel .chat-message.user .chat-message-content { .chat-panel .chat-message.user .chat-message-content {
background: transparent; background: var(--vscode-button-background, var(--accent-color, #007acc));
color: var(--vscode-list-activeSelectionForeground); color: var(--vscode-button-foreground, var(--vscode-list-activeSelectionForeground, #ffffff));
border: 0; border: 1px solid var(--vscode-button-background, var(--accent-color, #007acc));
padding: 6px 12px; border-radius: 6px;
padding: 12px 14px;
line-height: 1.35; line-height: 1.35;
} }
.chat-tool-surface-table { .chat-tool-surface-table {
@@ -3970,17 +3972,17 @@ button svg, button svg * {
overflow-x: auto; overflow-x: auto;
} }
.chat-panel .chat-input-container { .chat-panel .chat-input-container {
--chat-input-line-height: 20px; --chat-input-line-height: 22px;
--chat-input-min-height: 20px; --chat-input-min-height: 24px;
border-top: 1px solid var(--vscode-panel-border); border-top: 1px solid var(--vscode-panel-border);
padding: 8px 16px; padding: 12px 16px;
background: var(--vscode-sideBar-background); background: var(--vscode-sideBar-background);
} }
.chat-panel .chat-input-wrapper { .chat-panel .chat-input-wrapper {
min-height: 30px; min-height: 40px;
border: 1px solid var(--vscode-input-border); border: 1px solid var(--vscode-input-border);
border-radius: 6px; border-radius: 8px;
padding: 4px 6px; padding: 6px 8px;
background: var(--vscode-input-background); background: var(--vscode-input-background);
} }
.chat-panel .chat-input-wrapper:focus-within { .chat-panel .chat-input-wrapper:focus-within {
@@ -3997,10 +3999,14 @@ button svg, button svg * {
max-height: 160px; max-height: 160px;
resize: vertical; resize: vertical;
border: 0; border: 0;
outline: none;
background: transparent; background: transparent;
color: var(--vscode-input-foreground); color: var(--vscode-input-foreground);
overflow-y: hidden; overflow-y: hidden;
} }
.chat-panel .chat-input:focus {
outline: none;
}
.chat-panel .chat-input::placeholder { .chat-panel .chat-input::placeholder {
color: var(--vscode-input-placeholderForeground); color: var(--vscode-input-placeholderForeground);
} }