debug: better flex alignment

fixes #5315

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

@@ -10,10 +10,15 @@
 }
 
 .monaco-action-bar .actions-container {
-	display: inline-block;
+	display: flex;
 	margin: 0 auto;
 	padding: 0;
 	width: 100%;
+	justify-content: flex-end;
+}
+
+.monaco-action-bar.vertical .actions-container {
+	display: inline-block;
 }
 
 .monaco-action-bar .action-item {
@@ -170,11 +175,15 @@
 /* Action Items */
 .monaco-action-bar .action-item.select-container {
 	overflow: hidden; /* somehow the dropdown overflows its container, we prevent it here to not push */
+	flex: 1;
+	max-width: 170px;
+	min-width: 60px;
 }
 
 .monaco-workbench .action-bar-select {
 	height: 20px;
-	margin: 5px 4px;
+	width: 100%;
+	margin-top: 9px; /* Center the select box */
 }
 
 .vs-dark .monaco-workbench .action-bar-select {

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

@@ -53,13 +53,8 @@
 	line-height: 22px;
 }
 
-.monaco-workbench .debug-select {
-	max-width: 95%;
-}
-
 .monaco-workbench .monaco-action-bar .action-item.select-container {
 	overflow: hidden;
-	max-width: 50%;
 }
 
 .debug-viewlet .line-number {
@@ -103,6 +98,7 @@
 
 .debug-viewlet .debug-call-stack-title {
 	display: flex;
+	width: 100%;
 }
 
 .debug-viewlet .debug-call-stack-title > .pause-message {