chat: improve tool truncation styling (microsoft#262177)

* chat: improve tool truncation styling

Closes microsoft#261471

* refine

Author: connor4312

src/vs/workbench/contrib/chat/browser/chatContentParts/toolInvocationParts/chatToolConfirmationSubPart.ts

@@ -36,7 +36,7 @@ import { IChatMarkdownAnchorService } from '../chatMarkdownAnchorService.js';
 import { ChatMarkdownContentPart, EditorPool } from '../chatMarkdownContentPart.js';
 import { BaseChatToolInvocationSubPart } from './chatToolInvocationSubPart.js';
 
-const SHOW_MORE_MESSAGE_HEIGHT_TRIGGER = 30;
+const SHOW_MORE_MESSAGE_HEIGHT_TRIGGER = 45;
 
 export class ToolConfirmationSubPart extends BaseChatToolInvocationSubPart {
 	public readonly domNode: HTMLElement;
@@ -138,7 +138,9 @@ export class ToolConfirmationSubPart extends BaseChatToolInvocationSubPart {
 			const elements = dom.h('div', [
 				dom.h('.message@messageContainer', [
 					dom.h('.message-wrapper@message'),
-					dom.h('a.see-more@showMore'),
+					dom.h('.see-more@showMore', [
+						dom.h('a', [localize('showMore', "Show More")])
+					]),
 				]),
 				dom.h('.editor@editor'),
 				dom.h('.disclaimer@disclaimer'),
@@ -257,10 +259,9 @@ export class ToolConfirmationSubPart extends BaseChatToolInvocationSubPart {
 				}
 			}
 
-			this._makeMarkdownPart(elements.message, message, codeBlockRenderOptions);
-			elements.showMore.textContent = localize('seeMore', "See more");
+			const mdPart = this._makeMarkdownPart(elements.message, message, codeBlockRenderOptions);
 
-			const messageSeeMoreObserver = this._register(new ElementSizeObserver(elements.message, undefined));
+			const messageSeeMoreObserver = this._register(new ElementSizeObserver(mdPart.domNode, undefined));
 			const updateSeeMoreDisplayed = () => {
 				const show = messageSeeMoreObserver.getHeight() > SHOW_MORE_MESSAGE_HEIGHT_TRIGGER;
 				if (elements.messageContainer.classList.contains('can-see-more') !== show) {
@@ -360,5 +361,7 @@ export class ToolConfirmationSubPart extends BaseChatToolInvocationSubPart {
 		container.append(part.domNode);
 
 		this._register(part.onDidChangeHeight(() => this._onDidChangeHeight.fire()));
+
+		return part;
 	}
 }

src/vs/workbench/contrib/chat/browser/media/chat.css

@@ -439,16 +439,27 @@
 
 	.message .see-more {
 		display: none;
-		color: var(--vscode-textLink-foreground);
-		text-decoration: underline;
-		cursor: pointer;
+		position: absolute;
+		right: 0;
+		top: 20px;
+
+		a {
+			color: var(--vscode-textLink-foreground);
+			text-decoration: underline;
+			cursor: pointer;
+		}
 	}
 
 	.message.can-see-more {
+		position: relative;
+
 		.message-wrapper {
-			mask-image: linear-gradient(#000 0%, transparent 100%);
+			/* This mask fades out the end of the second line of text so the "see more" message can be displayed over it. */
+			mask-image:
+				linear-gradient(to right, rgba(0,0,0,1) calc(100% - 95px), rgba(0,0,0,0) calc(100% - 72px)),    linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20px, rgba(0,0,0,1) 2px, rgba(0,0,0,1) 100%);
+			mask-repeat: no-repeat, no-repeat;
 			pointer-events: none;
-			max-height: 2.5em;
+			max-height: 40px;
 		}
 
 		.see-more {