From e33013da3f89c62875374a6b6bdc6e9f4eb739d0 Mon Sep 17 00:00:00 2001 From: Johannes Rieken Date: Fri, 31 May 2024 16:26:06 +0200 Subject: [PATCH] Fix layout issues in inline chat (#214013) * clamp followup height to three lines fixes https://github.com/microsoft/vscode-copilot/issues/5522 * follow up question should not define the widget of the chat input part --- src/vs/workbench/contrib/chat/browser/chatInputPart.ts | 2 ++ src/vs/workbench/contrib/chat/browser/media/chat.css | 6 ++++++ .../contrib/inlineChat/browser/inlineChatContentWidget.ts | 2 +- 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/vs/workbench/contrib/chat/browser/chatInputPart.ts b/src/vs/workbench/contrib/chat/browser/chatInputPart.ts index 30e33ebabd2..90acf8cf0b1 100644 --- a/src/vs/workbench/contrib/chat/browser/chatInputPart.ts +++ b/src/vs/workbench/contrib/chat/browser/chatInputPart.ts @@ -530,6 +530,8 @@ export class ChatInputPart extends Disposable implements IHistoryNavigationWidge const inputEditorHeight = Math.min(data.inputPartEditorHeight, height - data.followupsHeight - data.inputPartVerticalPadding); + this.followupsContainer.style.width = `${width}px`; + this._inputPartHeight = data.followupsHeight + inputEditorHeight + data.inputPartVerticalPadding + data.inputEditorBorder + data.implicitContextHeight; const initialEditorScrollWidth = this._inputEditor.getScrollWidth(); diff --git a/src/vs/workbench/contrib/chat/browser/media/chat.css b/src/vs/workbench/contrib/chat/browser/media/chat.css index 5310cc02f75..f827efc194f 100644 --- a/src/vs/workbench/contrib/chat/browser/media/chat.css +++ b/src/vs/workbench/contrib/chat/browser/media/chat.css @@ -555,6 +555,12 @@ display: block; color: var(--vscode-textLink-foreground); font-size: 12px; + + /* clamp to max 3 lines */ + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; } .interactive-session .interactive-input-part .interactive-input-followups .interactive-session-followups code { diff --git a/src/vs/workbench/contrib/inlineChat/browser/inlineChatContentWidget.ts b/src/vs/workbench/contrib/inlineChat/browser/inlineChatContentWidget.ts index aec9f5cdcad..c305b01aab4 100644 --- a/src/vs/workbench/contrib/inlineChat/browser/inlineChatContentWidget.ts +++ b/src/vs/workbench/contrib/inlineChat/browser/inlineChatContentWidget.ts @@ -136,7 +136,7 @@ export class InlineChatContentWidget implements IContentWidget { const maxHeight = this._widget.input.inputEditor.getOption(EditorOption.lineHeight) * 5; const inputEditorHeight = this._widget.contentHeight; - this._widget.layout(Math.min(maxHeight, inputEditorHeight), 360); + this._widget.layout(Math.min(maxHeight, inputEditorHeight), 390); // const actualHeight = this._widget.inputPartHeight; // return new dom.Dimension(width, actualHeight);