Get line wrapping of long tag names sorted

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

@@ -137,8 +137,14 @@
 							)
 							span
 								a.projectName(href="/project/{{project.id}}") {{project.name}}
-								span.label.label-default.tag-label(ng-repeat='tag in project.tags')
-									| {{tag.name}}
+								span(
+									ng-controller="TagListController"
+								)
+									a.label.label-default.tag-label(
+										href,
+										ng-repeat='tag in project.tags',
+										ng-click="selectTag(tag)"
+									) {{tag.name}}
 						.col-md-2
 							span.owner {{ownerName()}}
 						.col-md-4

services/web/app/views/project/list/side-bar.jade

@@ -52,19 +52,18 @@
 			h2 Folders
 		li(
 			ng-repeat="tag in tags | filter:nonEmpty",
-			ng-controller="TagListItemController",
 			ng-class="{active: tag.selected}",
 			ng-cloak
 		)
-			a(href, ng-click="selectTag()")
+			a.tag(href, ng-click="selectTag(tag)")
 				i.icon.fa.fa-fw(
 					ng-class="{\
 						'fa-folder-open-o': tag.selected,\
 						'fa-folder-o': !tag.selected\
 					}"
 				)
-				|  {{tag.name}} 
-				span.subdued ({{tag.project_ids.length}})
+				span.name {{tag.name}} 
+					span.subdued  ({{tag.project_ids.length}})
 		li(ng-cloak)
 			a(href, ng-click="openNewTagModal()")
 				i.fa.fa-fw.fa-plus

services/web/public/coffee/main/project-list.coffee

@@ -456,11 +456,10 @@ define [
 			# modified during this session. Otherwise, tags which are empty
 			# when loading the page are not shown.
 			tag.project_ids.length > 0 or !!tag.showWhenEmpty
-
-	App.controller "TagListItemController", ($scope) ->
-		$scope.selectTag = () ->
+			
+		$scope.selectTag = (tag) ->
 			$scope._clearTags()
-			$scope.tag.selected = true
+			tag.selected = true
 			$scope.setFilter("tag")
 
 	App.controller "TagDropdownItemController", ($scope) ->

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

@@ -40,7 +40,7 @@ ul.folders-menu {
 			color: #333;
 			padding: (@line-height-computed / 4);
 		}
-		}
+	}
 	li.active {
 		//border-right: 4px solid @red;
 		a {
@@ -63,6 +63,21 @@ ul.folders-menu {
 		font-weight: 500;
 		font-family: @font-family-sans-serif;
 	}
+	a.tag {
+		padding: 2px (@line-height-computed / 4);
+		display: inline-block;
+		position: relative;
+		i {
+			position: absolute;
+			top: 7px;
+			left: 6px;
+		}
+		span.name {
+			display: inline-block;
+			padding-left: 22px;
+			line-height: 1.4;
+		}
+	}
 }
 
 form.project-search {
@@ -128,6 +143,9 @@ ul.project-list {
 			margin-left: @line-height-computed / 4;
 			position: relative;
 			top: -2px;
+			padding-top: 0.25em;
+			display: inline-block;
+			color: white;
 		}
 	}
 }