panelMenu: Consider vertical margins when computing max-height

When opening a panel menu, we set it's max-height to the available
work-area height to keep menus with scrollable content from growing
outside the monitor. However a menu that extends all the way down
to the bottom edge does not look great either, so also take margins
into account here.

https://bugzilla.gnome.org/show_bug.cgi?id=744498

data/theme/gnome-shell.css

@@ -715,6 +715,7 @@ StScrollBar StButton#vhandle:active {
 
 .panel-menu {
     -boxpointer-gap: 4px;
+    margin-bottom: 1.75em;
 }
 
 .panel-status-indicators-box,

js/ui/panelMenu.js

@@ -173,7 +173,8 @@ const Button = new Lang.Class({
         // menu is higher then the screen; it's useful if part of the menu is
         // scrollable so the minimum height is smaller than the natural height
         let workArea = Main.layoutManager.getWorkAreaForMonitor(Main.layoutManager.primaryIndex);
-        this.menu.actor.style = ('max-height: ' + Math.round(workArea.height) + 'px;');
+        let verticalMargins = this.menu.actor.margin_top + this.menu.actor.margin_bottom;
+        this.menu.actor.style = ('max-height: ' + Math.round(workArea.height - verticalMargins) + 'px;');
     },
 
     destroy: function() {