Fix spell-checker menu going offscreen.

services/web/public/coffee/ide/editor/components/spellMenu.coffee

@@ -4,6 +4,7 @@ define ["base"], (App) ->
       open: "<"
       top: "<"
       left: "<"
+      layoutFromBottom: "<"
       highlight: "<"
       replaceWord: "&"
       learnWord: "&"
@@ -13,7 +14,7 @@ define ["base"], (App) ->
     class="dropdown context-menu spell-check-menu"
     ng-show="$ctrl.open"
     ng-style="{top: $ctrl.top, left: $ctrl.left}"
-    ng-class="{open: $ctrl.open}"
+    ng-class="{open: $ctrl.open, 'spell-check-menu-from-bottom': $ctrl.layoutFromBottom}"
   >
     <ul class="dropdown-menu">
       <li ng-repeat="suggestion in $ctrl.highlight.suggestions | limitTo:8">

services/web/public/coffee/ide/editor/directives/aceEditor.coffee

@@ -544,6 +544,7 @@ define [
 						open="spellMenu.open"
 						top="spellMenu.top"
 						left="spellMenu.left"
+						layout-from-bottom="spellMenu.layoutFromBottom"
 						highlight="spellMenu.highlight"
 						replace-word="replaceWord(highlight, suggestion)"
 						learn-word="learnWord(highlight)"

services/web/public/coffee/ide/editor/directives/aceEditor/spell-check/SpellCheckAdapter.coffee

@@ -30,6 +30,12 @@ define [
 				end: position
 			})
 
+		isContextMenuEventOnBottomHalf: (e) ->
+			clientY = e.domEvent.clientY
+			editorBoundingRect = e.target.container.getBoundingClientRect()
+			relativeYPos = (clientY - editorBoundingRect.top) / editorBoundingRect.height
+			return relativeYPos > 0.5
+
 		selectHighlightedWord: (highlight) ->
 			row = highlight.range.start.row
 			startColumn = highlight.range.start.column

services/web/public/coffee/ide/editor/directives/aceEditor/spell-check/SpellCheckManager.coffee

@@ -55,6 +55,7 @@ define [], () ->
 		openContextMenu: (e) ->
 			coords = @adapter.getCoordsFromContextMenuEvent(e)
 			highlight = @adapter.getHighlightFromCoords(coords)
+			shouldPositionFromBottom = @adapter.isContextMenuEventOnBottomHalf(e)
 			if highlight
 				@adapter.preventContextMenuEventDefault(e)
 				@adapter.selectHighlightedWord(highlight)
@@ -63,6 +64,7 @@ define [], () ->
 						open: true
 						top: coords.y + 'px'
 						left: coords.x + 'px'
+						layoutFromBottom: shouldPositionFromBottom
 						highlight: highlight
 					}
 				return false

services/web/public/stylesheets/app/editor.less

@@ -649,3 +649,16 @@ CodeMirror
 	height: auto;
 	border-bottom: 1px solid @modal-header-border-color;
 }
+
+.spell-check-menu {
+	> .dropdown-menu > li > a {
+		padding: 2px 15px;
+	}
+}
+
+.spell-check-menu-from-bottom {
+	> .dropdown-menu {
+		top: auto;
+		bottom: 100%;
+	}
+}