Fix #55799

src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css

@@ -130,15 +130,14 @@
 .settings-editor > .settings-body .settings-tree-container .monaco-tree-wrapper,
 .settings-editor > .settings-body > .settings-tree-container .setting-measure-container {
 	/** 11px for scrollbar + 208px for TOC margin */
-	width: calc(100% - 219px);
-	margin-left: 188px;
+	width: calc(100% - 31px);
 	padding-left: 20px;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-measure-container {
 	/* 20 from monaco-tree-wrapper + 20 from monaco-tree-row */
 	padding-left: 40px;
-	width: calc(100% - 241px);
+	width: calc(100% - 53px);
 	border: 1px solid transparent;
 }
 
@@ -151,6 +150,22 @@
 	display: none !important;
 }
 
+.settings-editor > .settings-body > .settings-tree-container .shadow.top:not(.top-left-corner) {
+	position: absolute;
+	left: -160px; /* toc width */
+	right: 0px;
+	width: initial;
+}
+
+.settings-editor > .settings-body > .settings-tree-container > .monaco-tree .shadow.top.top-left-corner {
+	position: absolute;
+	left: -160px;
+}
+
+.settings-editor > .settings-body > .settings-tree-container > .monaco-tree .monaco-scrollable-element {
+	overflow: visible !important; /* so the shadow can be drawn outside the scrollable element */
+}
+
 .settings-editor > .settings-body .settings-tree-container .setting-toolbar-container {
 	position: absolute;
 	left: -23px;
@@ -189,7 +204,6 @@
 }
 
 .settings-editor > .settings-body .settings-toc-container {
-	position: absolute;
 	width: 160px;
 	margin-top: 16px;
 	padding-left: 5px;

src/vs/workbench/parts/preferences/browser/settingsEditor2.ts

@@ -438,6 +438,8 @@ export class SettingsEditor2 extends BaseEditor {
 			this.noResultsMessage.style.color = colors.editorForeground ? colors.editorForeground.toString() : null;
 		}));
 
+		this.createTOC(bodyContainer);
+
 		this.createFocusSink(
 			bodyContainer,
 			e => {
@@ -475,8 +477,6 @@ export class SettingsEditor2 extends BaseEditor {
 			},
 			'settings list focus helper'
 		);
-
-		this.createTOC(bodyContainer);
 	}
 
 	private createFocusSink(container: HTMLElement, callback: (e: any) => boolean, label: string): HTMLElement {