testing: fix markdown messages not displaying (#224612)

At the time markdown messages were rendered, the output element was not
in the DOM, so its height was always 0. It was also missing a couple of
style adjustments. Additionally it tweaks the diff height before we
fall back to nested scrollbars -- a limit of 1000px was very low.

I had this commit on a branch from earlier but it never made it to PR :x

Refs #224575

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

@@ -252,7 +252,8 @@
 
 .test-output-peek-message-container .preview-text {
 	padding: 8px 12px 8px 20px;
-	height: calc(100% - 16px);
+	line-height: normal;
+	white-space: normal;
 }
 
 .test-output-peek-message-container .preview-text p:first-child {

src/vs/workbench/contrib/testing/browser/testResultsView/testResultsOutput.ts

@@ -180,7 +180,7 @@ export class DiffContentProvider extends Disposable implements IPeekOutputRender
 		}
 
 		editor.layout(dimensions);
-		const height = Math.min(1000, Math.max(editor.getOriginalEditor().getContentHeight(), editor.getModifiedEditor().getContentHeight()));
+		const height = Math.min(10000, Math.max(editor.getOriginalEditor().getContentHeight(), editor.getModifiedEditor().getContentHeight()));
 		editor.layout({ height, width: dimensions.width });
 		return height;
 	}
@@ -219,7 +219,6 @@ export class MarkdownTestMessagePeek extends Disposable implements IPeekOutputRe
 
 
 		const rendered = this._register(this.markdown.value.render(message.message, {}));
-		rendered.element.style.height = '100%';
 		rendered.element.style.userSelect = 'text';
 		rendered.element.classList.add('preview-text');
 		this.container.appendChild(rendered.element);
@@ -232,7 +231,7 @@ export class MarkdownTestMessagePeek extends Disposable implements IPeekOutputRe
 			return undefined;
 		}
 
-		this.element.style.width = `${dimension.width}px`;
+		this.element.style.width = `${dimension.width - 32}px`;
 		return this.element.clientHeight;
 	}
 

src/vs/workbench/contrib/testing/browser/testResultsView/testResultsViewContent.ts

@@ -74,6 +74,7 @@ class MessageStackFrame extends CustomStackFrame {
 	}
 
 	public override render(container: HTMLElement): IDisposable {
+		this.message.style.visibility = 'visible';
 		container.appendChild(this.message);
 		return toDisposable(() => this.message.remove());
 	}
@@ -320,7 +321,13 @@ export class TestResultsViewContent extends Disposable {
 	}
 
 	private async prepareTopFrame(subject: InspectSubject, callFrames: ITestMessageStackFrame[]) {
+		// ensure the messageContainer is in the DOM so renderers can calculate the
+		// dimensions before it's rendered in the list.
+		this.messageContainer.style.visibility = 'hidden';
+		this.stackContainer.appendChild(this.messageContainer);
+
 		const topFrame = this.currentTopFrame = this.instantiationService.createInstance(MessageStackFrame, this.messageContainer, this.followupWidget, subject);
+
 		topFrame.showHeader.set(callFrames.length > 0, undefined);
 
 		const provider = await findAsync(this.contentProviders, p => p.update(subject));