fix vertical alignment in git changes view

src/vs/workbench/parts/git/browser/views/changes/changesView.css

@@ -32,16 +32,16 @@
 
 .git-viewlet > .changes-view > .status-view > .monaco-tree .monaco-tree-row .content {
 	line-height: 22px;
+	display: flex;
 }
 
 .git-viewlet > .changes-view > .status-view > .monaco-tree .monaco-tree-row .content .monaco-action-bar {
-	float: right;
 	display: none;
 	margin-right: 12px;
 }
 
 .git-viewlet > .changes-view > .status-view > .monaco-tree .monaco-tree-row .content .monaco-action-bar .action-item {
-	vertical-align: middle;
+	margin-top: 2px;
 }
 
 .git-viewlet > .changes-view > .status-view > .monaco-tree .monaco-tree-row .content .monaco-action-bar .action-label {
@@ -72,7 +72,6 @@
 }
 
 .git-viewlet > .changes-view > .status-view > .monaco-tree .monaco-tree-row .count-badge-wrapper {
-	float: right;
 	padding-right: 12px;
 }
 
@@ -80,6 +79,7 @@
 .git-viewlet > .changes-view > .status-view > .monaco-tree .monaco-tree-row .file-status {
 	overflow: hidden;
 	text-overflow: ellipsis;
+	flex: 1;
 }
 
 .vs-dark .git-viewlet > .changes-view > .status-view > .monaco-tree .monaco-tree-row .status-group {

src/vs/workbench/parts/git/browser/views/changes/changesViewer.ts

@@ -265,13 +265,6 @@ export class Renderer implements tree.IRenderer {
 	private renderStatusGroupTemplate(statusType: git.StatusType, container: HTMLElement): IStatusGroupTemplateData {
 		var data: IStatusGroupTemplateData = Object.create(null);
 
-		data.actionBar = new actionbar.ActionBar(container, { actionRunner: this.actionRunner });
-		data.actionBar.push(this.actionProvider.getActionsForGroupStatusType(statusType), { icon: true, label: false });
-		data.actionBar.addListener2('run', e => e.error && this.onError(e.error));
-
-		const wrapper = dom.append(container, $('.count-badge-wrapper'));
-		data.count = new countbadge.CountBadge(wrapper);
-
 		data.root = dom.append(container, $('.status-group'));
 
 		switch (statusType) {
@@ -280,16 +273,19 @@ export class Renderer implements tree.IRenderer {
 			case git.StatusType.MERGE:			data.root.textContent = nls.localize('mergeChanges', "Merge Changes"); break;
 		}
 
+		const wrapper = dom.append(container, $('.count-badge-wrapper'));
+		data.count = new countbadge.CountBadge(wrapper);
+
+		data.actionBar = new actionbar.ActionBar(container, { actionRunner: this.actionRunner });
+		data.actionBar.push(this.actionProvider.getActionsForGroupStatusType(statusType), { icon: true, label: false });
+		data.actionBar.addListener2('run', e => e.error && this.onError(e.error));
+
 		return data;
 	}
 
 	private renderFileStatusTemplate(statusType: git.StatusType, container: HTMLElement): IFileStatusTemplateData {
 		var data: IFileStatusTemplateData = Object.create(null);
 
-		data.actionBar = new actionbar.ActionBar(container, { actionRunner: this.actionRunner });
-		data.actionBar.push(this.actionProvider.getActionsForFileStatusType(statusType), { icon: true, label: false });
-		data.actionBar.addListener2('run', e => e.error && this.onError(e.error));
-
 		data.root = dom.append(container, $('.file-status'));
 		data.status = dom.append(data.root, $('span.status'));
 		data.name = dom.append(data.root, $('a.name.plain'));
@@ -302,6 +298,10 @@ export class Renderer implements tree.IRenderer {
 		data.renameName = dom.append(rename, $('span.rename-name'));
 		data.renameFolder = dom.append(rename, $('span.rename-folder'));
 
+		data.actionBar = new actionbar.ActionBar(container, { actionRunner: this.actionRunner });
+		data.actionBar.push(this.actionProvider.getActionsForFileStatusType(statusType), { icon: true, label: false });
+		data.actionBar.addListener2('run', e => e.error && this.onError(e.error));
+
 		return data;
 	}