fixes #106865

src/vs/workbench/contrib/debug/browser/debugHover.ts

@@ -34,7 +34,6 @@ import { EvaluatableExpressionProviderRegistry } from 'vs/editor/common/modes';
 import { CancellationToken } from 'vs/base/common/cancellation';
 
 const $ = dom.$;
-const MAX_TREE_HEIGHT = 324;
 
 async function doFindExpression(container: IExpressionContainer, namesToFind: string[]): Promise<IExpression | null> {
 	if (!container) {
@@ -140,7 +139,7 @@ export class DebugHoverWidget implements IContentWidget {
 				this.domNode.style.color = '';
 			}
 		}));
-		this.toDispose.push(this.tree.onDidChangeContentHeight(() => this.layoutTreeAndContainer()));
+		this.toDispose.push(this.tree.onDidChangeContentHeight(() => this.layoutTreeAndContainer(false)));
 
 		this.registerListeners();
 		this.editor.addContentWidget(this);
@@ -285,7 +284,7 @@ export class DebugHoverWidget implements IContentWidget {
 		await this.tree.setInput(expression);
 		this.complexValueTitle.textContent = expression.value;
 		this.complexValueTitle.title = expression.value;
-		this.layoutTreeAndContainer();
+		this.layoutTreeAndContainer(true);
 		this.editor.layoutContentWidget(this);
 		this.scrollbar.scanDomNode();
 		this.tree.scrollTop = 0;
@@ -298,11 +297,11 @@ export class DebugHoverWidget implements IContentWidget {
 		}
 	}
 
-	private layoutTreeAndContainer(): void {
+	private layoutTreeAndContainer(initialLayout: boolean): void {
 		const scrollBarHeight = 8;
-		const treeHeight = Math.min(MAX_TREE_HEIGHT, this.tree.contentHeight + scrollBarHeight);
+		const treeHeight = Math.min(this.editor.getScrollHeight() / 2, this.tree.contentHeight + scrollBarHeight);
 		this.treeContainer.style.height = `${treeHeight}px`;
-		this.tree.layout(treeHeight, 324);
+		this.tree.layout(treeHeight, initialLayout ? 400 : undefined);
 	}
 
 	hide(): void {

src/vs/workbench/contrib/debug/browser/media/debugHover.css

@@ -16,7 +16,7 @@
 }
 
 .monaco-editor .debug-hover-widget .complex-value {
-	width: 324px;
+	max-width: 700px;
 }
 
 .monaco-editor .debug-hover-widget .complex-value .title {
@@ -57,12 +57,13 @@
 	background-color: rgba(173, 214, 255, 0.15);
 }
 
-.monaco-editor .debug-hover-widget .value {
+.monaco-editor .debug-hover-widget > .monaco-scrollable-element > .value {
 	color: rgba(108, 108, 108, 0.8);
 	overflow: auto;
 	font-family: var(--monaco-monospace-font);
 	max-height: 500px;
 	padding: 4px 5px;
+	white-space: pre-wrap;
 }
 
 .monaco-editor.vs-dark .debugHoverHighlight,