remove zombie nodes when dynamic height changes.

src/vs/base/browser/ui/list/listView.ts

@@ -286,6 +286,8 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
 	}
 
 	updateDynamicHeight(index: number, element: T, size: number): void {
+		const renderRange = this.getRenderRange(this.lastRenderTop, this.lastRenderHeight);
+
 		this.rangeMap.splice(index, 1, [
 			{
 				size: size
@@ -294,13 +296,23 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
 
 		this.items[index].size = size;
 
-		const renderRange = this.getRenderRange(this.lastRenderTop, this.lastRenderHeight + size);
 		for (let i = renderRange.start; i < renderRange.end; i++) {
 			if (this.items[i].row) {
 				this.updateItemInDOM(this.items[i], i);
 			}
 		}
 
+		const newRenderRange = this.getRenderRange(this.lastRenderTop, this.lastRenderHeight);
+		const removeRanges = Range.relativeComplement(renderRange, newRenderRange);
+
+		for (const range of removeRanges) {
+			for (let i = range.start; i < range.end; i++) {
+				if (this.items[i].row) {
+					this.removeItemFromDOM(i);
+				}
+			}
+		}
+
 		this._onDidChangeContentHeight.fire(this.contentHeight);
 		this.eventuallyUpdateScrollDimensions();
 	}
@@ -1117,6 +1129,12 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
 					this.scrollTop = this.elementTop(anchorElementIndex) - anchorElementTopDelta!;
 				}
 
+				if (this.rowsContainer.getElementsByClassName('monaco-list-row').length > (renderRange.end - renderRange.start)) {
+					// there are zombie list rows
+					// console.log('remove zombie rows');
+					this.removeZombieRows(renderRange);
+				}
+
 				this._onDidChangeContentHeight.fire(this.contentHeight);
 				this.isRendering = false;
 				return;
@@ -1124,6 +1142,26 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
 		}
 	}
 
+	private removeZombieRows(renderRange: IRange) {
+		let elements = this.rowsContainer.getElementsByClassName('monaco-list-row');
+		let rowsToRemove = [];
+		for (let i = 0; i < elements.length; i++) {
+			let index = Number(elements[i].getAttribute('data-index'));
+			if (index >= renderRange.start && index < renderRange.end) {
+				continue;
+			} else {
+				rowsToRemove.push(index);
+			}
+		}
+
+		for (let i = 0; i < rowsToRemove.length; i++) {
+			let index = rowsToRemove[i];
+			if (this.items[index].row) {
+				this.removeItemFromDOM(index);
+			}
+		}
+	}
+
 	private probeDynamicHeight(index: number): number {
 		const item = this.items[index];
 

src/vs/workbench/contrib/notebook/browser/contentWidget.ts

@@ -213,10 +213,11 @@ export class BackLayerWebView extends Disposable {
 			if (data.type === 'dimension') {
 				let cell = this.mapping.get(data.id)?.cell;
 				let height = data.data.height;
-				let outputHeight = height === 0 ? 0 : height + 32;
+				let outputHeight = height === 0 ? 0 : height + 16;
 				if (cell) {
 					const lineNum = cell.lineCount;
-					const totalHeight = Math.max(lineNum + 1, 5) * 21;
+					const lineHeight = this.notebookHandler.getFontInfo()?.lineHeight ?? 18;
+					const totalHeight = Math.max(lineNum + 1, 5) * lineHeight;
 					cell.setDynamicHeight(totalHeight + 8 /* code cell padding */ + outputHeight);
 					this.notebookHandler.layoutElement(cell, totalHeight + 8 /* code cell padding */ + outputHeight);
 				}

src/vs/workbench/contrib/notebook/browser/notebookEditor.ts

@@ -279,7 +279,8 @@ export class NotebookEditor extends BaseEditor implements NotebookHandler {
 				this.localStore.add(this.list!.onDidScroll(() => updateScrollPosition()));
 				this.localStore.add(this.list!.onDidChangeContentHeight(() => updateScrollPosition()));
 
-				this.list?.splice(0, this.list?.length, this.viewCells);
+				this.list?.splice(0, this.list?.length);
+				this.list?.splice(0, 0, this.viewCells);
 				this.list?.layout();
 			});
 	}