From 7dd1f0558cdcfdd53d7564bf86df5b2b92bb1d3d Mon Sep 17 00:00:00 2001 From: Connor Peet Date: Tue, 29 Apr 2025 14:31:19 -0700 Subject: [PATCH] chat: fix bad wrapping of new tool UI (#247782) Fixes #247778 --- .../chatContentParts/chatToolInputOutputContentPart.ts | 8 +++++--- .../chatContentParts/media/chatConfirmationWidget.css | 9 +++++++++ 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/vs/workbench/contrib/chat/browser/chatContentParts/chatToolInputOutputContentPart.ts b/src/vs/workbench/contrib/chat/browser/chatContentParts/chatToolInputOutputContentPart.ts index 2199b247f5d..b354718cfbb 100644 --- a/src/vs/workbench/contrib/chat/browser/chatContentParts/chatToolInputOutputContentPart.ts +++ b/src/vs/workbench/contrib/chat/browser/chatContentParts/chatToolInputOutputContentPart.ts @@ -87,8 +87,10 @@ export class ChatCollapsibleInputOutputContentPart extends Disposable { super(); const elements = dom.h('.chat-confirmation-widget@root', [ - dom.h('.chat-confirmation-widget-title.expandable@title', [ + dom.h('.chat-confirmation-widget-title.expandable@titleContainer', [ dom.h('.chat-confirmation-widget-expando@expando'), + dom.h('.chat-confirmation-widget-title-inner@title'), + dom.h('.chat-confirmation-widget-title-icon@icon'), ]), dom.h('.chat-confirmation-widget-message@message'), ]); @@ -112,7 +114,7 @@ export class ChatCollapsibleInputOutputContentPart extends Disposable { ? ThemeIcon.asCSSSelector(Codicon.check) : ThemeIcon.asCSSSelector(ThemeIcon.modify(Codicon.loading, 'spin')) ); - elements.title.appendChild(check.root); + elements.icon.appendChild(check.root); const expanded = this._expanded = observableValue(this, initiallyExpanded); const btn = this._register(new Button(elements.expando, {})); @@ -133,7 +135,7 @@ export class ChatCollapsibleInputOutputContentPart extends Disposable { }; this._register(btn.onDidClick(toggle)); - this._register(dom.addDisposableListener(elements.title, dom.EventType.CLICK, toggle)); + this._register(dom.addDisposableListener(elements.titleContainer, dom.EventType.CLICK, toggle)); elements.message.appendChild(this.createMessageContents()); } diff --git a/src/vs/workbench/contrib/chat/browser/chatContentParts/media/chatConfirmationWidget.css b/src/vs/workbench/contrib/chat/browser/chatContentParts/media/chatConfirmationWidget.css index 5672cea19b7..76f390053ac 100644 --- a/src/vs/workbench/contrib/chat/browser/chatContentParts/media/chatConfirmationWidget.css +++ b/src/vs/workbench/contrib/chat/browser/chatContentParts/media/chatConfirmationWidget.css @@ -36,6 +36,15 @@ background: var(--vscode-toolbar-hoverBackground); } +.chat-confirmation-widget .chat-confirmation-widget-title-inner { + flex-grow: 1; + flex-basis: 0; +} + +.chat-confirmation-widget .chat-confirmation-widget-title-icon { + line-height: 0; +} + .chat-confirmation-widget .chat-confirmation-widget-title p, .chat-confirmation-widget .chat-confirmation-widget-title .rendered-markdown { display: inline;