Fix #59696 - fix settings container sizing, and shadow positioning when the editor gets narrow

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

@@ -122,7 +122,7 @@
 }
 
 .settings-editor.no-toc-search > .settings-body .settings-tree-container .monaco-tree-wrapper,
-.settings-editor.narrow > .settings-body .settings-tree-container .monaco-tree-wrapper {
+.settings-editor.narrow-width > .settings-body .settings-tree-container .monaco-tree-wrapper {
 	margin-left: 0px;
 }
 
@@ -132,15 +132,16 @@
 }
 
 .settings-editor > .settings-body .settings-tree-container .monaco-tree-wrapper .monaco-tree-rows {
-	margin-left: 208px;
-	width: calc(100% - 208px);
+	padding-left: 208px;
+	padding-right: 24px;
+	box-sizing: border-box;
 }
 
 .settings-editor.no-toc-search > .settings-body .settings-tree-container .monaco-tree-wrapper .monaco-tree-rows,
-.settings-editor.narrow > .settings-body .settings-tree-container .monaco-tree-wrapper .monaco-tree-rows {
+.settings-editor.narrow-width > .settings-body .settings-tree-container .monaco-tree-wrapper .monaco-tree-rows {
 	/* 3 margin + 20 padding + 2 border */
 	width: calc(100% - 25px);
-	margin-left: 25px;
+	padding-left: 25px;
 }
 
 .settings-editor > .settings-body .settings-tree-container .monaco-tree-row > .content::before {
@@ -148,6 +149,12 @@
 	display: none !important;
 }
 
+.settings-editor.mid-width > .settings-body > .settings-tree-container .shadow.top {
+	left: 0;
+	width: calc(100% - 48px);
+	margin-left: 24px;
+}
+
 .settings-editor > .settings-body > .settings-tree-container .shadow.top {
 	left: 50%;
 	max-width: 952px; /* 1000 - 24*2 padding */
@@ -200,7 +207,7 @@
 }
 
 .settings-editor.no-toc-search > .settings-body .settings-toc-container,
-.settings-editor.narrow > .settings-body .settings-toc-container {
+.settings-editor.narrow-width > .settings-body .settings-toc-container {
 	display: none;
 }
 
@@ -269,7 +276,7 @@
 }
 
 .settings-editor.no-toc-search > .settings-body .settings-tree-container,
-.settings-editor.narrow > .settings-body .settings-tree-container {
+.settings-editor.narrow-width > .settings-body .settings-tree-container {
 	margin-left: 0px;
 }
 

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

@@ -240,7 +240,8 @@ export class SettingsEditor2 extends BaseEditor {
 		const monacoWidth = (innerWidth > 1000 ? 1000 : innerWidth) - 10;
 		this.searchWidget.layout({ height: 20, width: monacoWidth });
 
-		DOM.toggleClass(this.rootElement, 'narrow', dimension.width < 600);
+		DOM.toggleClass(this.rootElement, 'mid-width', dimension.width < 1000 && dimension.width >= 600);
+		DOM.toggleClass(this.rootElement, 'narrow-width', dimension.width < 600);
 
 		// #56185
 		if (dimension.width !== this.lastLayedoutWidth) {