Fixes #209251 in recovery release. (#209900)

Author: hediet

src/vs/editor/browser/widget/diffEditor/diffEditorWidget.ts

@@ -57,8 +57,8 @@ export class DiffEditorWidget extends DelegatingEditor implements IDiffEditor {
 
 	private readonly elements = h('div.monaco-diff-editor.side-by-side', { style: { position: 'relative', height: '100%' } }, [
 		h('div.noModificationsOverlay@overlay', { style: { position: 'absolute', height: '100%', visibility: 'hidden', } }, [$('span', {}, 'No Changes')]),
-		h('div.editor.original@original', { style: { position: 'absolute', height: '100%', zIndex: '1', } }),
-		h('div.editor.modified@modified', { style: { position: 'absolute', height: '100%', zIndex: '1', } }),
+		h('div.editor.original@original', { style: { position: 'absolute', height: '100%', } }),
+		h('div.editor.modified@modified', { style: { position: 'absolute', height: '100%', } }),
 		h('div.accessibleDiffViewer@accessibleDiffViewer', { style: { position: 'absolute', height: '100%' } }),
 	]);
 	private readonly _diffModel = observableValue<DiffEditorViewModel | undefined>(this, undefined);

src/vs/editor/browser/widget/diffEditor/features/gutterFeature.ts

@@ -12,7 +12,7 @@ import { IObservable, autorun, autorunWithStore, derived, observableFromEvent, o
 import { URI } from 'vs/base/common/uri';
 import { DiffEditorEditors } from 'vs/editor/browser/widget/diffEditor/components/diffEditorEditors';
 import { DiffEditorViewModel } from 'vs/editor/browser/widget/diffEditor/diffEditorViewModel';
-import { appendRemoveOnDispose, applyStyle } from 'vs/editor/browser/widget/diffEditor/utils';
+import { appendRemoveOnDispose, applyStyle, prependRemoveOnDispose } from 'vs/editor/browser/widget/diffEditor/utils';
 import { EditorGutter, IGutterItemInfo, IGutterItemView } from 'vs/editor/browser/widget/diffEditor/utils/editorGutter';
 import { ActionRunnerWithContext } from 'vs/editor/browser/widget/multiDiffEditor/utils';
 import { EditorOption } from 'vs/editor/common/config/editorOptions';
@@ -38,7 +38,7 @@ export class DiffEditorGutter extends Disposable {
 
 	public readonly width = derived(this, reader => this._hasActions.read(reader) ? width : 0);
 
-	private readonly elements = h('div.gutter@gutter', { style: { position: 'absolute', height: '100%', width: width + 'px', zIndex: '0' } }, []);
+	private readonly elements = h('div.gutter@gutter', { style: { position: 'absolute', height: '100%', width: width + 'px' } }, []);
 
 	constructor(
 		diffEditorRoot: HTMLDivElement,
@@ -50,7 +50,7 @@ export class DiffEditorGutter extends Disposable {
 	) {
 		super();
 
-		this._register(appendRemoveOnDispose(diffEditorRoot, this.elements.root));
+		this._register(prependRemoveOnDispose(diffEditorRoot, this.elements.root));
 
 		this._register(addDisposableListener(this.elements.root, 'click', () => {
 			this._editors.modified.focus();

src/vs/editor/browser/widget/diffEditor/utils.ts

@@ -82,6 +82,13 @@ export function appendRemoveOnDispose(parent: HTMLElement, child: HTMLElement) {
 	});
 }
 
+export function prependRemoveOnDispose(parent: HTMLElement, child: HTMLElement) {
+	parent.prepend(child);
+	return toDisposable(() => {
+		parent.removeChild(child);
+	});
+}
+
 export function observableConfigValue<T>(key: string, defaultValue: T, configurationService: IConfigurationService): IObservable<T> {
 	return observableFromEvent(
 		(handleChange) => configurationService.onDidChangeConfiguration(e => {