Polish Settings editor styling (microsoft#165767)

* Remove .mid-width class
* Polish settings tabs widget border alignment

Author: rzhao271

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

@@ -95,6 +95,8 @@
 .settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget .action-label.checked {
 	opacity: 1;
 	color: var(--vscode-settings-headerForeground);
+}
+.settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget .action-label.checked:not(:focus) {
 	border-bottom-color: var(--vscode-settings-headerForeground);
 }
 
@@ -112,10 +114,6 @@
 	/* padding must be on action-label because it has the bottom-border, because that's where the .checked class is */
 }
 
-.settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget > .monaco-action-bar .action-item.focused {
-	outline-offset: -1.5px;
-}
-
 .settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget > .monaco-action-bar .action-item .action-label {
 	text-transform: none;
 	font-size: 13px;
@@ -130,8 +128,8 @@
 }
 
 .settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget > .monaco-action-bar .action-item .action-label:not(.checked):not(:focus) {
-	/* Add an extra pixel due to it not getting the outline */
-	padding-bottom: 8px;
+	/* Still maintain a border for alignment, but keep it transparent */
+	border-bottom: 1px solid transparent;
 }
 
 .settings-editor > .settings-body {
@@ -202,15 +200,6 @@
 	outline: 1px solid var(--vscode-settings-focusedRowBorder);
 }
 
-.settings-editor.mid-width > .settings-body .settings-tree-container .settings-editor-tree > .monaco-scrollable-element > .shadow.top {
-	left: 0;
-	width: calc(100% - 48px);
-	margin-left: 24px;
-}
-.settings-editor.mid-width > .settings-body .settings-tree-container .settings-editor-tree > .monaco-scrollable-element > .shadow.top.top-left-corner {
-	width: 24px;
-	margin-left: 0px;
-}
 .settings-editor > .settings-body .settings-tree-container .settings-editor-tree > .monaco-scrollable-element > .shadow.top {
 	z-index: 11;
 }

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

@@ -104,7 +104,6 @@ export class SettingsEditor2 extends EditorPane {
 	private static EDITOR_MIN_WIDTH: number = 500;
 	// Below NARROW_TOTAL_WIDTH, we only render the editor rather than the ToC.
 	private static NARROW_TOTAL_WIDTH: number = SettingsEditor2.TOC_RESET_WIDTH + SettingsEditor2.EDITOR_MIN_WIDTH;
-	private static MEDIUM_TOTAL_WIDTH: number = 1000;
 
 	private static SUGGESTIONS: string[] = [
 		`@${MODIFIED_SETTING_TAG}`,
@@ -442,7 +441,6 @@ export class SettingsEditor2 extends EditorPane {
 		const monacoWidth = innerWidth - 10 - this.countElement.clientWidth - this.controlsElement.clientWidth - 12;
 		this.searchWidget.layout(new DOM.Dimension(monacoWidth, 20));
 
-		this.rootElement.classList.toggle('mid-width', dimension.width < SettingsEditor2.MEDIUM_TOTAL_WIDTH && dimension.width >= SettingsEditor2.NARROW_TOTAL_WIDTH);
 		this.rootElement.classList.toggle('narrow-width', dimension.width < SettingsEditor2.NARROW_TOTAL_WIDTH);
 	}
 
@@ -1675,7 +1673,7 @@ export class SettingsEditor2 extends EditorPane {
 			this.splitView.resizeView(0, SettingsEditor2.TOC_RESET_WIDTH);
 		}
 		this.splitView.style({
-			separatorBorder: firstViewVisible ? this.theme.getColor(settingsSashBorder) ?? Color.transparent : Color.transparent
+			separatorBorder: firstViewVisible ? this.theme.getColor(settingsSashBorder)! : Color.transparent
 		});
 	}