From 4b9eb5a7f0c469fc084e459017140b980b3d6bd6 Mon Sep 17 00:00:00 2001 From: Oleg Solomko Date: Mon, 3 Feb 2025 15:31:33 -0800 Subject: [PATCH] improve layout of the prompt attachment (#239514) * [ui]: improve layout of the prompt attachment * [ui]: remove redundant outline style for monaco button * [ui]: remove redundant CSS styles --- .../instructionsAttachment.ts | 10 +++++++++- .../contrib/chat/browser/media/chat.css | 19 +++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) 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..9a0c57c3bc567 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,20 @@ 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 { + border-color: var(--vscode-focusBorder); +} +.chat-attached-context .chat-prompt-instructions-attachment .monaco-icon-label-container { + margin-top: -0.1em; +} /* * This overly-specific CSS selector is needed to beat priority of some * styles applied on the the `.chat-attached-context-attachment` element. @@ -987,6 +1002,10 @@ 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 { + 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