From a6e3786db7589259181fbe5203f15677447aca84 Mon Sep 17 00:00:00 2001 From: Rohan Malpani Date: Fri, 19 Jun 2026 17:30:34 -0700 Subject: [PATCH] Give ask-questions carousel a visible box in the Agents window Style the question carousel container so it renders as a bounded box that matches the tool-confirmation (permissions) dialog family. Previously the container only had a faint requestBorder outline with no fill, so in dark themes and the Agents window it did not read as a box. - Consolidate box styling onto the shared .chat-question-carousel-container - Border falls back to chat-requestBorder when input-border is transparent - Add focus-within/focus-visible -> focusBorder treatment - Use editor-background as the surface in the Agents window / editor Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../media/chatQuestionCarousel.css | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatQuestionCarousel.css b/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatQuestionCarousel.css index cd0d2c2bea6daf..ea7a08fe2b125a 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatQuestionCarousel.css +++ b/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatQuestionCarousel.css @@ -9,20 +9,18 @@ display: none; } -/* input specific styling */ +/* input specific styling - box look comes from the shared container rule below */ .interactive-session .interactive-input-part > .chat-question-carousel-widget-container .chat-question-carousel-container, .interactive-session .interactive-input-part .interactive-input-and-edit-session > .chat-question-carousel-widget-container .chat-question-carousel-container { margin: 0; - border: 1px solid var(--vscode-input-border, transparent); - background-color: var(--vscode-panel-background); - border-radius: var(--vscode-cornerRadius-large); } -/* general questions styling */ +/* general questions styling - matches the tool confirmation (permissions) box family */ .interactive-session .chat-question-carousel-container { margin: 8px 0; - border: 1px solid var(--vscode-chat-requestBorder); + border: 1px solid var(--vscode-input-border, var(--vscode-chat-requestBorder)); border-radius: var(--vscode-cornerRadius-large); + background-color: var(--vscode-panel-background); display: flex; flex-direction: column; overflow: hidden; @@ -31,6 +29,17 @@ position: relative; } +.interactive-session .chat-question-carousel-container:focus-visible, +.interactive-session .chat-question-carousel-container:focus-within { + border-color: var(--vscode-focusBorder); +} + +/* in the agents window / editor the surface is the editor background */ +.agent-sessions-workbench .interactive-session .chat-question-carousel-container, +.editor-instance .interactive-session .chat-question-carousel-container { + background-color: var(--vscode-editor-background); +} + /* input part wrapper */ .interactive-session .interactive-input-part > .chat-question-carousel-widget-container, .interactive-session .interactive-input-part .interactive-input-and-edit-session > .chat-question-carousel-widget-container {