From 87eb794ccc77647da7124ce78db7a1518ba0c549 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <jelawshe@gmail.com>
Date: Mon, 28 Jan 2019 10:06:23 -0600
Subject: [PATCH] Merge pull request #1424 from
 sharelatex/as-fix-overlapping-toolbar

Fix overlapping toolbar

GitOrigin-RevId: 0b901ddb2d52024aee0e4151180bcbc2223a3181
---
 .../stylesheets/app/editor/toolbar.less       | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index aeb8af07ac..64668c0507 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -111,14 +111,22 @@
 	}
 
 	.toolbar-center {
-		width: 300px;
-		position: absolute;
-		top: 0;
-		left: 50%;
-		margin-left: -150px;
 		text-align: center;
 		text-overflow: ellipsis;
 		overflow: hidden;
+		// At small screen sizes, center relative to the left menu and right buttons
+		width: 100%;
+		display: flex;
+		justify-content: center;
+
+		// At large screen sizes, center relative to the viewport
+		@media (min-width: @screen-lg-min) {
+			width: 300px;
+			position: absolute;
+			top: 0;
+			left: 50%;
+			margin-left: -150px;
+		}
 	}
 
 	&.toolbar-header {
@@ -171,7 +179,7 @@
 	vertical-align: middle;
 	text-align: left;
 
-	@media (min-width: @screen-sm-min) {
+	@media (min-width: @screen-md-min) {
 		display: inline-block;
 	}