Fix auto complete in user profile

services/web/app/views/project/list.jade

@@ -93,20 +93,11 @@ block content
 							div
 								strong Create your first project!
 
-					-if (settings.enableSubscriptions && !hasSubscription)
-						.row-spaced(ng-if="projects.length > 0", ng-cloak).text-centered
-							hr
-							p.small You are using the free version of ShareLaTeX.
-							p
-								a(href="/user/subscription/plans").btn.btn-info Upgrade
-							p.small
-								| or unlock some free bonus features by 
-								a(href="/user/bonus") sharing ShareLaTeX.
-
 					- if (showUserDetailsArea)
-						.row-spaced#userProfileInformation(ng-if="projects.length > 0 && percentComplete < 100", ng-cloak)
+						.row-spaced#userProfileInformation(ng-if="projects.length > 0", ng-cloak)
 							div(ng-controller="UserProfileController")
-								.alert.alert-info.text-centered.user-profile
+								hr(ng-show="percentComplete < 100")
+								.text-centered.user-profile(ng-show="percentComplete < 100")
 									.progress
 										.progress-bar.progress-bar-info(ng-style="{'width' : (percentComplete+'%')}")
 
@@ -115,11 +106,21 @@ block content
 										strong {{percentComplete}}% 
 										| complete
 
-									button#completeUserProfileInformation.btn.btn-primary.btn-sm(
+									button#completeUserProfileInformation.btn.btn-info(
 										ng-hide="formVisable",
 										ng-click="openUserProfileModal()"
 									) Complete
 
+					-if (settings.enableSubscriptions && !hasSubscription)
+						.row-spaced(ng-if="projects.length > 0", ng-cloak).text-centered
+							hr
+							p.small You are using the free version of ShareLaTeX.
+							p
+								a(href="/user/subscription/plans").btn.btn-primary Upgrade
+							p.small
+								| or unlock some free bonus features by 
+								a(href="/user/bonus") sharing ShareLaTeX.
+
 				.col-md-10
 					.container-fluid
 						.row
@@ -459,9 +460,7 @@ block content
 							ng-model="userInfoForm.role",
 							placeholder='Role',
 							ng-blur="sendUpdate()",
-							list="_roles"
+							typeahead="role for role in roles"
 						)
-						datalist#_roles
-							option(ng-repeat='role in roles') {{role}}
 			.modal-footer
 				button.btn.btn-info(ng-click="done()") Done

services/web/public/stylesheets/app/project-list.less

@@ -1,16 +1,16 @@
 .project-header {
-  .btn-group > .btn {
-    padding-left: @line-height-base / 2;
-    padding-right: @line-height-base / 2;
-  }
+	.btn-group > .btn {
+		padding-left: @line-height-base / 2;
+		padding-right: @line-height-base / 2;
+	}
 }
 
 .project-search {
-  margin: @line-height-base 0;
+	margin: @line-height-base 0;
 }
 
 .project-tools {
-  display: inline;
+	display: inline;
 }
 
 .first-project {
@@ -40,7 +40,7 @@ ul.folders-menu {
 			color: #333;
 			padding: (@line-height-computed / 4);
 		}
-  	}
+		}
 	li.active {
 		//border-right: 4px solid @red;
 		a {
@@ -124,3 +124,54 @@ ul.project-list {
 		}
 	}
 }
+
+#institution_auto_complete {
+
+	ul>li{
+		list-style:none;
+	}
+
+	.autocomplete {
+		width: 100%;
+		position: relative;
+	}
+
+	.autocomplete ul {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		z-index: @zindex-dropdown;
+		float: left;
+		min-width: 160px;
+		padding: 5px 0;
+		margin: 2px 0 0; // override default ul
+		list-style: none;
+		font-size: @font-size-base;
+		background-color: @dropdown-bg;
+		border: 1px solid @dropdown-fallback-border; // IE8 fallback
+		border: 1px solid @dropdown-border;
+		border-radius: @border-radius-base;
+		.box-shadow(0 6px 12px rgba(0,0,0,.175));
+		background-clip: padding-box;
+
+		// Links within the dropdown menu
+		> li {
+			display: block;
+			padding: 3px 20px;
+			clear: both;
+			font-weight: normal;
+			line-height: @line-height-base;
+			color: @dropdown-link-color;
+			white-space: nowrap; // prevent links from randomly breaking onto new lines
+		}
+
+		> li.active {
+			text-decoration: none;
+			color: @dropdown-link-hover-color;
+			background-color: @dropdown-link-hover-bg;
+		}
+	}
+	.autocomplete .highlight {
+		font-weight: 700;
+	}
+}