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,11 +69,10 @@ 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%)' }",
@@ -84,14 +83,18 @@ header.toolbar.toolbar-header.toolbar-with-labels(
 				ng-click="gotoUser(user)"
 			) {{ userInitial(user) }}
 
-			span.dropdown(dropdown, ng-if="onlineUsersArray.length >= 4")
+		.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-user
+				i.fa.fa-fw.fa-users
 			ul.dropdown-menu.pull-right
 				li.dropdown-header #{translate('connected_users')}
 				li(ng-repeat="user in onlineUsersArray")

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 {