now /users looks as it should. made some tweaks to user search to improve UX as well

public/css/style.less

@@ -262,6 +262,9 @@ footer.footer {
 	word-wrap: break-word;
 }
 
+#users-container {
+	padding: 0;
+}
 .users-box{
   display: inline-block;
   margin-top: 20px;

public/src/forum/users.js

@@ -8,6 +8,8 @@
 			parts = url.split('/'),
 			active = parts[parts.length-1];
 
+		var lastSearch = null;
+
 		app.addCommasToNumbers();
 
 		jQuery('.nav-pills li').removeClass('active');
@@ -27,22 +29,30 @@
 			timeoutId = setTimeout(function() {
 				var username = $('#search-user').val();
 				
-				jQuery('.icon-spinner').removeClass('none');
+				if (username == '') {
-				socket.emit('api:admin.user.search', username);
+					jQuery('#user-notfound-notify').html('<i class="icon icon-circle-blank"></i>');
+					jQuery('#user-notfound-notify').parent().removeClass('btn-warning label-warning btn-success label-success');
+					return;
+				}
+				
+				if (lastSearch === username) return;
+				lastSearch = username;
+				
+				jQuery('#user-notfound-notify').html('<i class="icon-spinner icon-spin"></i>');
+
+				setTimeout(function() {
+					socket.emit('api:admin.user.search', username);
+				}, 500); //replace this with global throttling function/constant
+				
 			}, 250);
 		});
 		
 		socket.removeAllListeners('api:admin.user.search');
 		
 		socket.on('api:admin.user.search', function(data) {
-			
-			jQuery('.icon-spinner').addClass('none');				
-			
 			if(data === null) {
-				$('#user-notfound-notify').html('You need to be logged in to search!')
+				$('#user-notfound-notify').html('You need to be logged in to search!');
-					.show()
+				$('#user-notfound-notify').parent().addClass('btn-warning label-warning');
-					.addClass('label-danger')
-					.removeClass('label-success');
 				return;
 			}
 			
@@ -55,16 +65,12 @@
 
 
 			if(data && data.length === 0) {
-				$('#user-notfound-notify').html('User not found!')
+				$('#user-notfound-notify').html('User not found!');
-					.show()
+				$('#user-notfound-notify').parent().addClass('btn-warning label-warning');
-					.addClass('label-danger')
-					.removeClass('label-success');
 			}
 			else {
-				$('#user-notfound-notify').html(data.length + ' user'+(data.length>1?'s':'') + ' found!')
+				$('#user-notfound-notify').html(data.length + ' user'+(data.length>1?'s':'') + ' found!');
-					.show()
+				$('#user-notfound-notify').parent().addClass('btn-success label-success');
-					.addClass('label-success')
-					.removeClass('label-danger');
 			}
 
 		});

public/templates/users.tpl

@@ -7,11 +7,15 @@
 		<li class=''><a href='/users-search'>Search</a></li>
 	</ul>
 
-
+	<br />
 	<div class="search {search_display} well">
-		<input id="search-user" type="text" placeholder="Enter a username to search"/><br />
+		
-		<i class="icon-spinner icon-spin none"></i>
+		<div class="input-group">
-		<span id="user-notfound-notify" class="label label-danger hide">User not found!</span><br/>
+			<input class="form-control" id="search-user" type="text" placeholder="Enter a username to search"/>
+	        <span class="input-group-addon">
+	        	<span id="user-notfound-notify"><i class="icon icon-circle-blank"></i></span>
+	        </span>
+		</div>
 	</div>
 	
 	<ul id="users-container" class="users">