actoinBar use flex

fixes #1029

src/vs/base/browser/ui/actionbar/actionbar.css

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 .monaco-action-bar {
-	text-align: center;
+	text-align: right;
 	overflow: hidden;
 	white-space: nowrap;
 }

src/vs/workbench/browser/parts/compositePart.ts

@@ -428,6 +428,13 @@ export abstract class CompositePart<T extends Composite> extends Part {
 			'class': ['composite', 'title']
 		});
 
+		// Left Title Label
+		$(titleArea).div({
+			'class': 'title-label'
+		}, (div) => {
+			this.titleLabel = div.span();
+		});
+
 		// Right Actions Container
 		$(titleArea).div({
 			'class': 'title-actions'
@@ -440,13 +447,6 @@ export abstract class CompositePart<T extends Composite> extends Part {
 			});
 		});
 
-		// Left Title Label
-		$(titleArea).div({
-			'class': 'title-label'
-		}, (div) => {
-			this.titleLabel = div.span();
-		});
-
 		return titleArea;
 	}
 

src/vs/workbench/browser/parts/media/compositePart.css

@@ -8,7 +8,12 @@
 }
 
 .monaco-workbench > .part > .composite.title {
-	display: block;
+	display: flex;
+}
+
+.monaco-workbench > .part > .composite.title > .title-actions {
+	flex: 1;
+	padding-left: 5px;
 }
 
 .monaco-workbench > .part > .composite.title > .title-label span {

src/vs/workbench/parts/debug/browser/media/debugViewlet.css

@@ -54,11 +54,12 @@
 }
 
 .monaco-workbench .debug-select {
-	max-width: 115px;
+	max-width: 95%;
 }
 
 .monaco-workbench .monaco-action-bar .action-item.select-container {
 	overflow: hidden;
+	max-width: 50%;
 }
 
 .debug-viewlet .line-number {