fix: use grid headerHeight instead of random 30px value for menu height calculation

Author: Dana Greenberg

src/js/core/directives/ui-grid-menu.js

@@ -47,10 +47,10 @@ function ($compile, $timeout, $window, $document, gridUtil, uiGridConstants, i18
       $scope.dynamicStyles = '';
 
       var setupHeightStyle = function(gridHeight) {
-        // magic number of 30 because the grid menu displays somewhat below
-        // the top of the grid. It is approximately 30px.
-        var gridMenuMaxHeight = gridHeight - 30;
-		$scope.dynamicStyles = [
+        //menu appears under header row, so substract that height from it's total
+        // additional 20px for general padding
+        var gridMenuMaxHeight = gridHeight - uiGridCtrl.grid.headerHeight - 20;
+        $scope.dynamicStyles = [
           '.grid' + uiGridCtrl.grid.id + ' .ui-grid-menu-mid {',
           'max-height: ' + gridMenuMaxHeight + 'px;',
           '}'

test/unit/core/directives/ui-grid-menu.spec.js

@@ -80,14 +80,15 @@ describe('ui-grid-menu', function() {
       $scope.$broadcast('show-menu');
 
       expect(isolateScope.dynamicStyles).toBeDefined();
-      expect(isolateScope.dynamicStyles).toContain('.grid1234 .ui-grid-menu-mid { max-height: 370px; }');
+      expect(isolateScope.dynamicStyles).toContain('.grid1234 .ui-grid-menu-mid { max-height: 350px; }');
     });
 
     function compileWithGrid () {
       var grid = angular.element('<div><div id="test-grid-menu" ui-grid-menu menu-items="items"></div></div>');
       grid.data('$uiGridController', $controller(function ($scope) {
         this.grid = {
           gridHeight: 400,
+          headerHeight: 30,
           id: '1234',
           api: {
             core: {