Style the recompile button; use flexbox for the toolbar.

services/web/app/views/project/editor/pdf.pug

@@ -1,6 +1,6 @@
 div.full-size.pdf(ng-controller="PdfController")
 	.toolbar.toolbar-pdf
-		.btn-group#recompile(
+		.btn-group.btn-recompile-group#recompile(
 			dropdown,
 			tooltip-html="'"+translate('recompile_pdf')+" <span class=\"keyboard-shortcut\">({{modifierKey}} + Enter)</span>'"
 			tooltip-class="keyboard-tooltip"
@@ -8,7 +8,7 @@ div.full-size.pdf(ng-controller="PdfController")
 			tooltip-append-to-body="true"
 			tooltip-placement="bottom"
 		)
-			a.btn.btn-info(
+			a.btn.btn-recompile(
 				href,
 				ng-disabled="pdf.compiling",
 				ng-click="recompile()"
@@ -19,7 +19,7 @@ div.full-size.pdf(ng-controller="PdfController")
 				| &nbsp;&nbsp;
 				span(ng-show="!pdf.compiling") #{translate("recompile")}
 				span(ng-show="pdf.compiling") #{translate("compiling")}...
-			a.btn.btn-info.dropdown-toggle(
+			a.btn.btn-recompile.dropdown-toggle(
 				href,
 				ng-disabled="pdf.compiling",
 				dropdown-toggle

services/web/public/stylesheets/app/editor/file-tree.less

@@ -1,9 +1,10 @@
-.toolbar.toolbar-filetree {
-	.toolbar-small-mixin;
-	.toolbar-alt-mixin;
-}
 
 #file-tree {
+	.toolbar.toolbar-filetree {
+		.toolbar-small-mixin;
+		.toolbar-alt-mixin;
+	}
+	
 	.file-tree-inner {
 		position: absolute;
 		top: 32px;

services/web/public/stylesheets/app/editor/pdf.less

@@ -1,9 +1,9 @@
-.toolbar.toolbar-pdf when (@is-overleaf = true) {
+.pdf .toolbar.toolbar-pdf when (@is-overleaf = true) {
 	.toolbar-small-mixin;
 	.toolbar-alt-mixin;
 }
 
-.toolbar.toolbar-pdf when (@is-overleaf = false) {
+.pdf .toolbar.toolbar-pdf when (@is-overleaf = false) {
 	.toolbar-tall-mixin;
 }
 
@@ -22,6 +22,25 @@
 	}
 }
 
+.btn-recompile-group when (@is-overleaf = true) {
+	height: 100%;
+}
+
+.btn-recompile when (@is-overleaf = true) {
+	height: 100%;
+	.btn-primary;
+	padding-top: 3px;
+	padding-bottom: 3px;
+	&:first-child {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+}
+
+.btn-recompile when (@is-overleaf = false) {
+	.btn-info;
+}
+
 .pdf-viewer {
 	iframe {
 		width: 100%;
@@ -91,7 +110,6 @@
 
 .pdf .toolbar {
 	.toolbar-right {
-		margin-right: @line-height-computed / 2;
 		a {
 			&:hover {
 				i {

services/web/public/stylesheets/app/editor/toolbar.less

@@ -1,6 +1,8 @@
 .toolbar {
+	display: flex;
+	align-items: center;
 	height: 40px;
-	border-bottom: 1px solid @toolbar-border-color;
+	border-bottom: @toolbar-border-bottom;
 
 	> a, .toolbar-right > a {
 		position: relative;
@@ -23,8 +25,8 @@
 	.toolbar-right > a:not(.btn) {
 		display: inline-block;
 		color: @toolbar-icon-btn-color;
-		padding: 4px 10px 5px;
-		margin: 1px 2px;
+		padding: 0 5px;
+		// margin: 1px 2px;
 		border-radius: @border-radius-small;
 		&:hover {
 			text-shadow: @toolbar-icon-btn-hover-shadow;
@@ -72,12 +74,15 @@
 	}
 
 	.toolbar-left {
+		display: flex;
 		float: left;
 		text-align: center;
 	}
 
 	.toolbar-right {
-		float: right;
+		display: flex;
+		flex-grow: 1;
+		justify-content: flex-end;
 		.btn-full-height {
 			border-right: 0;
 			border-left: 1px solid @toolbar-border-color;
@@ -121,35 +126,11 @@
 
 .toolbar-small-mixin() {
 	height: 32px;
-	> a, .toolbar-right > a {
-		padding: 2px 4px 1px 4px;
-		margin: 0;
-		margin-top: 2px;
-	}
-	> a {
-		margin-left: 2px;
-	}
-	.toolbar-right > a {
-		margin-left: 0;
-		margin-right: 2px;
-	}
 }
 
 .toolbar-tall-mixin() {
 	height: 58px;
 	padding-top: 10px;
-	> a, .toolbar-right > a {
-		padding: 4px 10px 5px;
-	}
-	> a.btn, .toolbar-right > a.btn {
-		margin: 0 (@line-height-computed / 2);
-	}
-	.btn-group {
-		margin: 0 (@line-height-computed / 2);
-		> .btn-group {
-			margin: 0;
-		}
-	}
 }
 .toolbar-alt-mixin() {
 	background-color: @toolbar-alt-bg-color;

services/web/public/stylesheets/core/_common-variables.less

@@ -902,6 +902,7 @@
 @toolbar-icon-btn-color        : @gray-light;
 @toolbar-icon-btn-hover-color  : @gray-dark;
 @toolbar-icon-btn-hover-shadow : 0 1px 0 rgba(0, 0, 0, 0.25);
+@toolbar-border-bottom         : 1px solid @toolbar-border-color;
 
 // Editor file-tree
 @file-tree-bg                    : transparent;

services/web/public/stylesheets/core/ol-variables.less

@@ -171,7 +171,7 @@
 @toolbar-icon-btn-color         : #FFF;
 @toolbar-icon-btn-hover-color   : #FFF;
 @toolbar-icon-btn-hover-shadow  : none;
-
+@toolbar-border-bottom          : 0;
 // Editor file-tree
 @file-tree-bg                   : @ol-blue-gray-4;
 @file-tree-item-color           : #FFF;