Fix layout to not overlap with inset title bar

app/scripts/views/app-view.js

@@ -39,6 +39,8 @@ const AppView = Backbone.View.extend({
 
     views: null,
 
+    isMacOS: false,
+
     initialize: function () {
         this.views = {};
         this.views.menu = new MenuView({ model: this.model.menu });
@@ -81,6 +83,8 @@ const AppView = Backbone.View.extend({
 
         this.listenTo(UpdateModel.instance, 'change:updateReady', this.updateApp);
 
+        this.isMacOS = (typeof process !== 'undefined') ? (process.platform === 'darwin') : false;
+
         window.onbeforeunload = this.beforeUnload.bind(this);
         window.onresize = this.windowResize.bind(this);
         window.onblur = this.windowBlur.bind(this);
@@ -94,7 +98,8 @@ const AppView = Backbone.View.extend({
 
     render: function () {
         this.$el.html(this.template({
-            beta: this.model.isBeta
+            beta: this.model.isBeta,
+            macos: this.isMacOS
         }));
         this.panelEl = this.$el.find('.app__panel:first');
         this.views.listWrap.setElement(this.$el.find('.app__list-wrap')).render();

app/styles/areas/_app.scss

@@ -23,6 +23,9 @@
         display: none;
       }
     }
+    &.macos {
+      padding-top: 40px;
+    }
   }
 
   &__list-wrap {

app/templates/app.hbs

@@ -1,7 +1,7 @@
 <div class="app">
     {{#if beta}}<div class="app__beta"><i class="fa fa-exclamation-triangle"></i> {{res 'appBeta'}}</div>{{/if}}
     <div class="app__body">
-        <div class="app__menu"></div>
+        <div class="app__menu {{#if macos}}macos{{/if}}"></div>
         <div class="app__menu-drag"></div>
         <div class="app__list-wrap">
             <div class="app__list"></div>