Almost working except for the sidebar

app/app.html

@@ -17,7 +17,7 @@
       logger: 'renderer',
       environment: process.env.INSOMNIA_ENV || 'production',
       level: 'warning',
-      release: require('./app.json').version,
+      release: require('./package.json').version,
       ignoreUrls: [
         /.*raven\.min\.js.*/
       ],
@@ -53,7 +53,7 @@
   }
 </script>
 <script>
-  const {productName} = require('./app.json');
+  const {productName} = require('./package.json');
   if (process.env.INSOMNIA_ENV === 'development') {
     document.title = `${productName} (DEV)`;
   } else {

app/app.js

@@ -15,7 +15,7 @@ var ravenClient = new raven.Client(
   'https://fb3242f902b54cdd934b8ffa204426c0:23430fbe203a' +
   '4189a68efb63c38fc50b@app.getsentry.com/88289', {
     environment: process.env.INSOMNIA_ENV || 'production',
-    release: require('./app.json').version,
+    release: require('./package.json').version,
     logger: 'main'
   });
 
@@ -27,7 +27,7 @@ if (!IS_DEV) {
 const electron = require('electron');
 const request = require('request');
 const path = require('path');
-const {version: appVersion, productName: appName} = require('./app.json');
+const {version: appVersion, productName: appName} = require('./package.json');
 const {LocalStorage} = require('node-localstorage');
 const {
   app,

app/components/ResponsePane.js

@@ -148,7 +148,7 @@ class ResponsePane extends Component {
       <section className="response-pane pane">
         {timer}
 
-        <header className="pane__header pad no-wrap">
+        <header className="pane__header pad-left pad-right no-wrap">
           {!response ? null : (
             <ResponsePaneHeader
               statusCode={response.statusCode}

app/containers/EnvironmentsDropdown.js

@@ -1,6 +1,7 @@
 import React, {Component, PropTypes} from 'react';
 import {ipcRenderer} from 'electron';
-import {connect} from 'react-redux'
+import {connect} from 'react-redux';
+import classnames from 'classnames';
 
 import EnvironmentsModal from '../components/modals/WorkspaceEnvironmentsEditModal';
 import Dropdown from '../components/base/Dropdown';
@@ -39,7 +40,7 @@ class EnvironmentsDropdown extends Component {
     const activeEnvironment = allEnvironments.find(e => e._id === workspace.metaActiveEnvironmentId) || baseEnvironment;
 
     return (
-      <Dropdown {...other} className={className + ' wide'}>
+      <Dropdown {...other} className={classnames(className, 'wide')}>
         <button className="btn btn--super-compact no-wrap">
           <div className="sidebar__menu__thing">
             <span>

app/css/components/editor.less

@@ -11,9 +11,16 @@
   grid-template-columns: 100%;
 
   .editor__container {
-    height: 100%;
-    width: 100%;
-    box-sizing: border-box;
+    position: relative;
+  }
+
+  // This is a hack because it will stretch out the Grid otherwise
+  .CodeMirror {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
   }
 
   .editor__toolbar {

app/css/components/envmodal.less

@@ -4,7 +4,7 @@
 .env-modal.modal__body {
   display: grid;
   grid-template-columns: 17rem 1fr;
-  grid-template-rows: 1fr;
+  grid-template-rows: 100%;
   max-width: 100%;
   width: 100%;
 
@@ -90,7 +90,7 @@
   .env-modal__main {
     display: grid;
     grid-template-rows: auto 1fr;
-    grid-template-columns: 1fr;
+    grid-template-columns: 100%;
     height: 100%;
     width: 100%;
 

app/css/components/modal.less

@@ -35,7 +35,7 @@
 
   .modal__content {
     display: grid;
-    grid-template-columns: 1fr;
+    grid-template-columns: 100%;
     grid-template-rows: auto 1fr auto;
     color: @font-super-light-bg;
     border-radius: @radius-md;

app/css/components/pane.less

@@ -6,7 +6,7 @@
   width: 100%;
   display: grid;
   grid-template-rows: @height-nav 1fr;
-  grid-template-columns: 1fr;
+  grid-template-columns: 100%;
 
   .pane__header {
     display: flex;

app/css/components/sidebar.less

@@ -5,7 +5,7 @@
   position: relative;
   display: grid;
   grid-template-rows: @height-nav auto auto 1fr;
-  grid-template-columns: 1fr;
+  grid-template-columns: 100%;
 
   background-color: @bg-dark;
   color: @font-dark-bg;

app/css/components/tabs.less

@@ -8,7 +8,7 @@
   height: 100%;
   display: grid;
   grid-template-rows: auto 1fr;
-  grid-template-columns: 1fr;
+  grid-template-columns: 100%;
   align-content: stretch;
 
   .ReactTabs__TabList {

app/lib/appInfo.js

@@ -1,4 +1,4 @@
-import * as appJson from '../app.json';
+import * as appJson from '../package.json';
 
 export function getAppVersion () {
   return appJson.version;

package.json

@@ -99,6 +99,7 @@
     "concurrently": "^2.0.0",
     "cross-env": "^2.0.0",
     "css-loader": "^0.23.1",
+    "electron": "^1.4.0",
     "electron-builder": "^6.3.5",
     "electron-prebuilt": "~1.2.8",
     "elm": "^0.17.1",

scripts/build.sh

@@ -22,8 +22,7 @@ cross-env NODE_ENV=production webpack --config ./webpack/webpack.config.producti
 echo "-- COPYING REMAINING FILES --"
 
 # Copy package JSON
-cp app/app.json "$BUILD_DIR/app.json"
-cp app/app.json "$BUILD_DIR/package.json"
+cp app/package.json "$BUILD_DIR"
 
 # Copy some things
 cp -r app/images app/external assets/* app/app.js "$BUILD_DIR/"

webpack/webpack.config.base.babel.js

@@ -1,5 +1,5 @@
 import path from 'path';
-import pkg from '../app/app.json';
+import pkg from '../app/package.json';
 
 export default {
   devtool: 'source-map',