Merge pull request #2227 from overleaf/ns-title-rename-overlap

fix title rename overlap with online collaborators

GitOrigin-RevId: ccb5065a73e3e8e4079d14e029d57c302f9fc0cb

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

@@ -69,37 +69,40 @@ header.toolbar.toolbar-header.toolbar-with-labels(
 			i.fa.fa-pencil
 
 	.toolbar-right
-		span.online-users(
-			ng-show="onlineUsersArray.length > 0"
+		.online-users(
+			ng-if="onlineUsersArray.length < 4"
 			ng-controller="OnlineUsersController"
 		)
-			span(ng-if="onlineUsersArray.length < 4")
-				span.online-user(
-					ng-repeat="user in onlineUsersArray",
-					ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }",
-					popover="{{ user.name }}"
-					popover-placement="bottom"
-					popover-append-to-body="true"
-					popover-trigger="mouseenter"
-					ng-click="gotoUser(user)"
-				) {{ userInitial(user) }}
+			span.online-user(
+				ng-repeat="user in onlineUsersArray",
+				ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }",
+				popover="{{ user.name }}"
+				popover-placement="bottom"
+				popover-append-to-body="true"
+				popover-trigger="mouseenter"
+				ng-click="gotoUser(user)"
+			) {{ userInitial(user) }}
 
-			span.dropdown(dropdown, ng-if="onlineUsersArray.length >= 4")
-				span.online-user.online-user-multi(
-					dropdown-toggle,
-					tooltip=translate('connected_users'),
-					tooltip-placement="left"
-				)
-					strong {{ onlineUsersArray.length }}
-					i.fa.fa-fw.fa-user
-				ul.dropdown-menu.pull-right
-					li.dropdown-header #{translate('connected_users')}
-					li(ng-repeat="user in onlineUsersArray")
-						a(href, ng-click="gotoUser(user)")
-							span.online-user(
-								ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }"
-							) {{ user.name.slice(0,1) }}
-							| {{ user.name }}
+		.online-users.dropdown(
+			dropdown
+			ng-if="onlineUsersArray.length >= 4"
+			ng-controller="OnlineUsersController"
+		)
+			span.online-user.online-user-multi(
+				dropdown-toggle,
+				tooltip=translate('connected_users'),
+				tooltip-placement="left"
+			)
+				strong {{ onlineUsersArray.length }}
+				i.fa.fa-fw.fa-users
+			ul.dropdown-menu.pull-right
+				li.dropdown-header #{translate('connected_users')}
+				li(ng-repeat="user in onlineUsersArray")
+					a(href, ng-click="gotoUser(user)")
+						span.online-user(
+							ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }"
+						) {{ user.name.slice(0,1) }}
+						| {{ user.name }}
 
 		if !isRestrictedTokenMember
 			a.btn.btn-full-height(

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

@@ -179,7 +179,6 @@
 .project-name {
 	.name {
 		display: inline-block;
-		max-width: 250px;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		vertical-align: top;
@@ -194,6 +193,7 @@
 		text-align: center;
 		padding: 6px;
 		font-weight: 700;
+		max-width: 500px;
 	}
 	a.rename {
 		visibility: hidden;

services/web/public/stylesheets/app/editor/online-users.less

@@ -1,6 +1,8 @@
 @online-user-color: rgb(0, 170, 255);
 
 .online-users {
+	display: flex;
+
 	.online-user {
 		background-color: @online-user-color;
 		width: 24px;
@@ -19,9 +21,12 @@
 		min-width: 24px;
 		padding-left: 8px;
 		padding-right: 5px;
+		display: flex;
+		align-items: center;
 	}
 
 	.dropdown-menu {
+		margin-right: 8px;
 		a {
 			// Override toolbar link styles
 			display: block;

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

@@ -118,15 +118,6 @@
 		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 {