diff --git a/src/vs/workbench/contrib/chat/browser/attachments/instructionsAttachment/instructionsAttachment.ts b/src/vs/workbench/contrib/chat/browser/attachments/instructionsAttachment/instructionsAttachment.ts index f959d7eabf118..0cb9b04a7095f 100644 --- a/src/vs/workbench/contrib/chat/browser/attachments/instructionsAttachment/instructionsAttachment.ts +++ b/src/vs/workbench/contrib/chat/browser/attachments/instructionsAttachment/instructionsAttachment.ts @@ -148,7 +148,15 @@ export class InstructionsAttachmentWidget extends Disposable { this._register(this.hoverService.setupManagedHover(getDefaultHoverDelegate('element'), hintElement, title)); // create the `remove` button - const removeButton = this.renderDisposables.add(new Button(this.domNode, { supportIcons: true, title: localize('remove', "Remove") })); + const removeButton = this.renderDisposables.add( + new Button( + this.domNode, + { + supportIcons: true, + title: localize('remove', "Remove"), + }, + ), + ); removeButton.icon = Codicon.x; this.renderDisposables.add(removeButton.onDidClick((e) => { e.stopPropagation(); diff --git a/src/vs/workbench/contrib/chat/browser/media/chat.css b/src/vs/workbench/contrib/chat/browser/media/chat.css index 17ac0e5844275..18aaf82f93364 100644 --- a/src/vs/workbench/contrib/chat/browser/media/chat.css +++ b/src/vs/workbench/contrib/chat/browser/media/chat.css @@ -968,6 +968,7 @@ have to be updated for changes to the rules above, or to support more deeply nes .chat-attached-context .chat-prompt-instructions-attachment .chat-implicit-hint { opacity: 0.7; font-size: .9em; + margin-top: -0.5px; } .chat-attached-context .chat-prompt-instructions-attachment.warning { color: var(--vscode-notificationsWarningIcon-foreground); @@ -979,6 +980,21 @@ have to be updated for changes to the rules above, or to support more deeply nes border-style: dashed; opacity: 0.75; } +.chat-attached-context .chat-prompt-instructions-attachment .monaco-button { + border-left: 1px solid var(--vscode-chat-requestBorder, var(--vscode-input-background, transparent)); + margin-left: 3px; +} +.chat-attached-context .chat-prompt-instructions-attachment.error .monaco-button, +.chat-attached-context .chat-prompt-instructions-attachment.warning .monaco-button { + border-left-color: currentColor; +} +.chat-attached-context .chat-prompt-instructions-attachment:focus .monaco-button { + outline: none; + border-color: var(--vscode-focusBorder); +} +.chat-attached-context .chat-prompt-instructions-attachment .monaco-icon-label-container { + margin-top: -1px; +} /* * This overly-specific CSS selector is needed to beat priority of some * styles applied on the the `.chat-attached-context-attachment` element. @@ -987,6 +1003,11 @@ have to be updated for changes to the rules above, or to support more deeply nes .chat-attached-context .chat-prompt-instructions-attachments .chat-prompt-instructions-attachment.warning.implicit { border: 1px solid currentColor; } +.chat-attached-context .chat-prompt-instructions-attachments .chat-prompt-instructions-attachment.implicit .monaco-button { + margin-top: -1.5px; + padding-left: 2px; + padding-right: 2px; +} /* * If in one of the non-normal states, make sure the `main icon` of * the component has the same color as the component itself