Settings editor - special-case "Commonly Used" settings height so it lines up...

Settings editor - special-case "Commonly Used" settings height so it lines up with the top of the TOC

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

@@ -285,6 +285,10 @@
 	font-size: 20px;
 }
 
+.settings-editor > .settings-body > .settings-tree-container .settings-group-level-1.settings-group-first {
+	padding-top: 7px;
+}
+
 .settings-editor > .settings-body .settings-feedback-button {
 	color: rgb(255, 255, 255);
 	background-color: rgb(14, 99, 156);

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

@@ -70,6 +70,7 @@ export class SettingsTreeGroupElement extends SettingsTreeElement {
 	children: (SettingsTreeGroupElement | SettingsTreeSettingElement)[];
 	label: string;
 	level: number;
+	isFirstGroup: boolean;
 }
 
 export class SettingsTreeSettingElement extends SettingsTreeElement {
@@ -111,6 +112,8 @@ export class SettingsTreeModel {
 
 	update(newTocRoot = this._tocRoot): void {
 		const newRoot = this.createSettingsTreeGroupElement(newTocRoot);
+		(<SettingsTreeGroupElement>newRoot.children[0]).isFirstGroup = true;
+
 		if (this._root) {
 			this._root.children = newRoot.children;
 		} else {
@@ -451,6 +454,10 @@ export class SettingsRenderer implements IRenderer {
 
 	getHeight(tree: ITree, element: SettingsTreeElement): number {
 		if (element instanceof SettingsTreeGroupElement) {
+			if (element.isFirstGroup) {
+				return 31;
+			}
+
 			return 40 + (7 * element.level);
 		}
 
@@ -642,6 +649,10 @@ export class SettingsRenderer implements IRenderer {
 		const labelElement = DOM.append(template.parent, $('div.settings-group-title-label'));
 		labelElement.classList.add(`settings-group-level-${element.level}`);
 		labelElement.textContent = (<SettingsTreeGroupElement>element).label;
+
+		if (element.isFirstGroup) {
+			labelElement.classList.add('settings-group-first');
+		}
 	}
 
 	private elementIsSelected(tree: ITree, element: SettingsTreeElement): boolean {