Change:
<!-- Do Not Delete This! bugreporttemplate --<!-- Please read our Rules of Conduct: --<!-- Read our guide about submitting issues: --<!-- Search existing issues to avoid creating duplicates. --<!-- Test using the latest Insiders build to see if your issue has already been fixed: --<!-- Instead of creating your report here, use 'Report Issue' from the 'Help' menu in VS Code to pre-fill useful information. --<!-- Launch with to check. --Does this issue occur when all extensions are disabled?: Yes <!-- If you answered No above, use 'Help: Start Extension Bisect' from Command Palette to try to identify the cause. --<!-- Issues caused by an extension need to be reported directly to the extension publisher. The 'Help Report Issue' dialog can assist with this. --- VS Code Version: 1.65.0-insider (Universal) Commit: OS Version: Mac OS Monterey 12.2.1 Follow up issue to as this is a degradation in UX compared to the non-Insider version. Any input on that ? Current: ! Expected: Different columns should be aligned !
thank you for the bug report!

Discussion:
this._modifiedWebview.dispose(); } <del> this._modifiedWebview = this.instantiationService.createInstance(BackLayerWebView, this, id, resource, this._notebookOptions.computeDiffWebviewOptions(), undefined) as BackLayerWebView<IDiffCellInfo>; </del> <ins> this._modifiedWebview = this.instantiationService.createInstance(BackLayerWebView, this, id, resource, { ...this._notebookOptions.computeDiffWebviewOptions(), fontFamily: this._generateFontFamily() }, undefined) as BackLayerWebView<IDiffCellInfo>; </ins> // attach the webview container to the DOM tree first this._list.rowsContainer.insertAdjacentElement('afterbegin', this._modifiedWebview.element); await this._modifiedWebview.createWebview(); this._modifiedWebview.element.style.width = `calc(50% - 16px)`; this._modifiedWebview.element.style.left = `calc(50%)`; } <ins> _generateFontFamily(): string { return this._fontInfo?.fontFamily ?? `"SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace`; } </ins> private async _createOriginalWebview(id: string, resource: URI): Promise<void> { if (this._originalWebview) { this._originalWebview.dispose(); } <del> this._originalWebview = this.instantiationService.createInstance(BackLayerWebView, this, id, resource, this._notebookOptions.computeDiffWebviewOptions(), undefined) as BackLayerWebView<IDiffCellInfo>; </del> <ins> this._originalWebview = this.instantiationService.createInstance(BackLayerWebView, this, id, resource, { ...this._notebookOptions.computeDiffWebviewOptions(), fontFamily: this._generateFontFamily() }, undefined) as BackLayerWebView<IDiffCellInfo>; </ins> // attach the webview container to the DOM tree first this._list.rowsContainer.insertAdjacentElement('afterbegin', this._originalWebview.element); await this._originalWebview.createWebview();

if (e.compactView || e.focusIndicator || e.insertToolbarPosition || e.cellToolbarLocation || e.dragAndDropEnabled || e.fontSize || e.markupFontSize || e.insertToolbarAlignment) { this._styleElement?.remove(); this._createLayoutStyles(); <del> this._webview?.updateOptions(this.notebookOptions.computeWebviewOptions()); </del> <ins> this._webview?.updateOptions({ ...this.notebookOptions.computeWebviewOptions(), fontFamily: this._generateFontFamily() }); </ins> } if (this._dimension && this._isVisible) {

DOM.append(parent, this._overflowContainer); } <ins> private _generateFontFamily() { return this._fontInfo?.fontFamily ?? `"SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace`; } </ins> private _createLayoutStyles(): void { this._styleElement = DOM.createStyleSheet(this._body); const {

this._generateFontInfo(); } <del> const fontFamily = this._fontInfo?.fontFamily ?? `"SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace`; </del> <ins> const fontFamily = this._generateFontFamily(); </ins> styleSheets.push(` :root {

|| oldBottomToolbarDimensions.bottomToolbarHeight !== newBottomToolbarDimensions.bottomToolbarHeight) { this._styleElement?.remove(); this._createLayoutStyles(); <del> this._webview?.updateOptions(this.notebookOptions.computeWebviewOptions()); </del> <ins> this._webview?.updateOptions({ ...this.notebookOptions.computeWebviewOptions(), fontFamily: this._generateFontFamily() }); </ins> } type WorkbenchNotebookOpenClassification = { scheme: { classification: 'SystemMetaData'; purpose: 'FeatureInsight' };

didDragMarkupCell: that._didDragMarkupCell.bind(that), didDropMarkupCell: that._didDropMarkupCell.bind(that), didEndDragMarkupCell: that._didEndDragMarkupCell.bind(that) <del> }, id, resource, this._notebookOptions.computeWebviewOptions(), this.notebookRendererMessaging.getScoped(this._uuid)); </del> <ins> }, id, resource, { ...this._notebookOptions.computeWebviewOptions(), fontFamily: this._generateFontFamily() }, this.notebookRendererMessaging.getScoped(this._uuid)); </ins> this._webview.element.style.width = '100%';

readonly runGutter: number; readonly dragAndDropEnabled: boolean; readonly fontSize: number; <ins> readonly fontFamily: string; </ins> readonly markupFontSize: number; }

'notebook-markdown-min-height': `${this.options.previewNodePadding * 2}px`, 'notebook-markup-font-size': typeof this.options.markupFontSize === 'number' && this.options.markupFontSize > 0 ? `${this.options.markupFontSize}px` : `calc(${this.options.fontSize}px * 1.2)`, 'notebook-cell-output-font-size': `${this.options.fontSize}px`, <ins> 'notebook-cell-output-font-family': this.options.fontFamily, </ins> 'notebook-cell-markup-empty-content': nls.localize('notebook.emptyMarkdownPlaceholder', "Empty markdown cell, double click or press enter to edit."), 'notebook-cell-renderer-not-found-error': nls.localize({ key: 'notebook.error.rendererNotFound',