Don't let widgets in review panel overlap

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

@@ -44,8 +44,8 @@ div.full-size(
 		)
 		#review-panel
 			.review-panel-scroller
-				.review-entry-list
-					.review-entry(ng-repeat="(entry_id, entry) in reviewPanel.entries", ng-style="{'top': entry.screenPos.y}")
+				.review-entry-list(review-panel-sorted)
+					.review-entry(ng-repeat="(entry_id, entry) in reviewPanel.entries", ng-style="{'top': top}")
 						{{ entry.content }}
 
 	.ui-layout-east

services/web/public/coffee/ide/review-panel/ReviewPanelManager.coffee

@@ -1,3 +1,4 @@
 define [
 	"ide/review-panel/controllers/ReviewPanelController"
+	"ide/review-panel/directives/reviewPanelSorted"
 ], () ->

services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee

@@ -0,0 +1,26 @@
+define [
+	"base"
+], (App) ->
+	console.log "Defingint", "reviePanelSorted"
+	App.directive "reviewPanelSorted", () ->
+		return  {
+			link: (scope, element, attrs) ->
+				scope.$watch "reviewPanel.entries", (value) ->
+					return if !value?
+					console.log "reviewPanel.entries updates", entries
+					entries = []
+					for el in element.find(".review-entry")
+						entries.push {
+							el: el
+							scope: angular.element(el).scope()
+						}
+					entries.sort (a,b) -> a.scope.entry.offset - b.scope.entry.offset
+					
+					previousBottom = 0
+					for entry in entries
+						height = $(entry.el).height()
+						top = entry.scope.entry.screenPos.y
+						top = Math.max(top, previousBottom + 12)
+						previousBottom = top + height
+						entry.scope.top = top
+		}