Almost fixed grid

app/components/Sidebar.js

@@ -128,12 +128,12 @@ class Sidebar extends Component {
     const {activeFilter, requestGroups} = this.props;
 
     return (
-      <aside className="sidebar pane bg-dark">
-        <div className="grid-v">
-          <header className="pane__header">
+      <aside className="sidebar bg-dark">
+        <div className="grid--v">
+          <header className="header">
             <h1><WorkspaceDropdown /></h1>
           </header>
-          <div className="pane__body grid-v">
+          <div className="grid--v">
             <div className="stock-height form-control form-control--outlined">
               <DebouncingInput
                 type="text"

app/components/dropdowns/WorkspaceDropdown.js

@@ -11,11 +11,9 @@ class WorkspaceDropdown extends Component {
 
     return (
       <Dropdown right={true} {...other} className="block">
-        <button className="pane__header__content">
-          <div className="grid">
-            <div className="col">
-              Insomnia
-            </div>
+        <button className="header__content">
+          <div className="grid grid--center">
+            <div className="grid__cell">Insomnia</div>
             <div className="no-wrap">
               {loading ? <i className="fa fa-refresh fa-spin txt-lg"></i> : ''}&nbsp;
               <i className="fa fa-caret-down txt-lg"></i>

app/containers/App.js

@@ -28,71 +28,72 @@ class App extends Component {
 
     return (
       <div className="grid grid-collapse">
-        <section id="request-pane" className="pane col tall">
-          <div className="grid-v">
-            <header className="pane__header">
-              <RequestUrlBar
-                onUrlChange={updateRequestUrl}
-                onMethodChange={updateRequestMethod}
-                request={activeRequest}/>
+        <section className="grid__cell">
+          <div className="grid--v">
+            <header className="header">
+              <div className="grid__cell">
+                <RequestUrlBar
+                  onUrlChange={updateRequestUrl}
+                  onMethodChange={updateRequestMethod}
+                  request={activeRequest}/>
+              </div>
             </header>
-            <div className="pane__body grid-v bg-super-dark">
-              <Tabs selectedIndex={0} className="grid-v">
+            <div className="grid__cell grid--v bg-super-dark">
+              <Tabs selectedIndex={0} className="grid--v">
                 <TabList className="grid grid--left">
                   <Tab><button className="btn">Body</button></Tab>
                   <Tab><button className="btn">Params</button></Tab>
                   <Tab><button className="btn">Auth</button></Tab>
                   <Tab><button className="btn">Headers</button></Tab>
                 </TabList>
-                <TabPanel className="grid-v">
+                <TabPanel>
                   <RequestBodyEditor
                     className="grid-v"
                     onChange={updateRequestBody}
                     request={activeRequest}/>
                 </TabPanel>
-                <TabPanel className="grid-v pad">Params</TabPanel>
-                <TabPanel className="grid-v pad">Basic Auth</TabPanel>
-                <TabPanel className="grid-v pad">Headers</TabPanel>
+                <TabPanel className="pad">Params</TabPanel>
+                <TabPanel className="pad">Basic Auth</TabPanel>
+                <TabPanel className="pad">Headers</TabPanel>
               </Tabs>
             </div>
           </div>
         </section>
-        <section id="response-pane" className="pane col tall">
-          <div className="grid-v">
-            <header className="pane__header text-center">
-              <div className="grid">
+        <section className="grid__cell">
+          <div className="grid--v">
+            <header className="header text-center">
+              <div className="grid grid--center">
                 <div className="tag success"><strong>200</strong>&nbsp;SUCCESS</div>
                 <div className="tag">TIME&nbsp;<strong>143ms</strong></div>
               </div>
             </header>
-            <div className="pane__body grid-v">
-              <Tabs selectedIndex={0} className="grid-v bg-super-dark">
+            <div className="grid--v">
+              <Tabs selectedIndex={0} className="grid--v bg-super-dark">
                 <TabList className="grid grid--left">
                   <Tab><button className="btn">Response</button></Tab>
                   <Tab><button className="btn">Raw</button></Tab>
                   <Tab><button className="btn">Headers</button></Tab>
                   <Tab><button className="btn">Cookies</button></Tab>
                 </TabList>
-                <TabPanel className="grid-v">
+                <TabPanel className="grid--v">
                   <Editor
-                    className="grid-v"
+                    className="grid--v"
                     options={{
                       mode: 'application/json',
                       readOnly: true,
                       placeholder: 'nothing yet...'
                     }}/>
                 </TabPanel>
-                <TabPanel className="grid-v">
+                <TabPanel>
                   <Editor
-                    className="grid-v"
                     options={{
                       mode: 'application/json',
                       readOnly: true,
                       placeholder: 'nothing yet...'
                     }}/>
                 </TabPanel>
-                <TabPanel className="grid-v pad">Headers</TabPanel>
-                <TabPanel className="grid-v pad">Cookies</TabPanel>
+                <TabPanel className="pad">Headers</TabPanel>
+                <TabPanel className="pad">Cookies</TabPanel>
               </Tabs>
             </div>
           </div>
@@ -106,7 +107,7 @@ class App extends Component {
     const activeRequest = requests.all.find(r => r.id === requests.active);
 
     return (
-      <div className="grid bg-super-dark">
+      <div className="grid bg-super-dark tall">
         <Sidebar
           activateRequest={actions.activateRequest}
           changeFilter={actions.changeFilter}
@@ -117,8 +118,13 @@ class App extends Component {
           loading={loading}
           requestGroups={requestGroups.all}
           requests={requests.all}/>
-        <div className="col tall">
-          {this.renderPageBody(actions, activeRequest)}
+        <div className="grid__cell grid--v">
+          <header className="header">
+            <div className="header__content"><h1>Hi World</h1></div>
+          </header>
+          <div className="grid__cell">
+            {this.renderPageBody(actions, activeRequest)}
+          </div>
         </div>
       </div>
     )

app/css/components/editor.scss

@@ -2,12 +2,13 @@
 @import '../constants/dimensions';
 
 .editor {
-  height: 100%;
   width: 100%;
+  min-width: 100%;
+  //height: 100%;
+  min-height: 100%;
 
   .CodeMirror {
-    height: 100% !important;
-    width: 100%;
+    //height: 100%;
     font-family: "Source Code Pro", monospace;
     box-sizing: border-box;
     font-size: $font-size-md;
@@ -28,14 +29,6 @@
   }
 
   .CodeMirror-scroll {
-    /*
-     * Not sure why but this fixes vertical sizing of scroll
-     * area in flexbox grid
-     */
-    box-sizing: border-box;
-    margin-bottom: 0;
-    padding-bottom: 0;
-
     /* Normal Overrides */
     cursor: text; // Show text cursor everywhere (not just in .Codemirror-lines)
   }

app/css/components/grid.scss

@@ -1,54 +1,42 @@
 @import '../constants/dimensions';
 
-.grid {
+.grid,
+.grid--v {
   display: flex;
-  flex-direction: row;
   flex-wrap: nowrap;
   justify-content: center;
-  align-items: center;
-  align-content: flex-start;
-  height: 100%;
-  width: 100%;
+  align-items: stretch;
+  align-content: stretch;
+  overflow: auto;
   box-sizing: border-box;
 
-  &.grid--left {
+  &.grid--center {
+    align-items: center;
+  }
+
+  &.grid--start {
     justify-content: flex-start;
   }
 
-  &.grid--right {
+  &.grid--end {
     justify-content: flex-end;
   }
 
-  & > .col {
-    display: block;
-    flex: 1 1 auto;
-    width: 100%;
-    overflow: hidden;
+  & > .grid__cell {
+    overflow: auto;
+    flex: 1 1 100%;
     box-sizing: border-box;
   }
-
-  .pull-right {
-    align-self: flex-end;
-  }
 }
 
-.grid-v {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-items: stretch;
-  align-content: flex-start;
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
+.grid {
+  max-width: 100%;
+  flex-direction: row;
+}
 
-  & > .row {
-    display: block;
-    flex: 1 1 auto;
-    height: 100%;
-    box-sizing: border-box;
-  }
+.grid--v {
+  max-height: 100%;
+  flex-direction: column;
 }
 
 @media (max-width: $breakpoint-md) {

app/css/components/header.scss

@@ -0,0 +1,15 @@
+@import '../constants/dimensions';
+
+.header {
+  height: $line-height-md;
+  line-height: $line-height-md;
+  flex-shrink: 0;
+
+  .header__content {
+    width: 100%;
+    display: block;
+    height: $line-height-md;
+    box-sizing: border-box;
+    padding: 0 $padding-md;
+  }
+}

app/css/components/pane.scss

@@ -1,23 +0,0 @@
-@import '../constants/colors';
-@import '../constants/dimensions';
-
-.pane {
-  .pane__body, .pane__header {
-    border-right: 1px solid $hl-sm;
-    //border-left: 2px solid rgba(0, 0, 0, 0.2);
-  }
-
-  .pane__header {
-    //border-color: transparent;
-    height: $line-height-md;
-    line-height: $line-height-md;
-
-    .pane__header__content {
-      width: 100%;
-      display: block;
-      height: $line-height-md;
-      box-sizing: border-box;
-      padding: 0 $padding-md;
-    }
-  }
-}

app/css/index.scss

@@ -11,13 +11,11 @@
 @import 'components/links';
 
 /* Layout */
-@import 'components/pane';
 @import 'components/forms';
+@import 'components/header';
 
 /* Components */
 @import 'layout/sidebar';
-@import 'layout/request';
-@import 'layout/response';
 @import 'components/tag';
 @import 'components/tabs';
 @import 'components/scrollbars';

app/css/layout/base.scss

@@ -34,7 +34,6 @@ h2 {
 
 .tall {
   height: 100%;
-  display: block;
   box-sizing: border-box;
 }
 
@@ -70,6 +69,10 @@ i.fa {
   }
 }
 
+.scrollable {
+  overflow: scroll;
+}
+
 .hover-scrollbars {
   &::-webkit-scrollbar {
     display: none;

app/css/layout/request.scss

@@ -1,4 +0,0 @@
-@import '../constants/dimensions';
-
-#request-pane {
-}

app/css/layout/response.scss

@@ -1,7 +0,0 @@
-@import '../constants/colors';
-
-#response-pane {
-  .pane__header, .pane__body {
-    border-right: 0;
-  }
-}

app/css/layout/sidebar.scss

@@ -3,20 +3,11 @@
 
 .sidebar {
   height: 100%;
-
-  .pane__body {
-    width: $sidebar-width;
-    height: 100%;
-  }
+  width: $sidebar-width;
+  flex-shrink: 0;
 
   .sidebar__scroll {
     overflow-y: auto;
-    height: 100%;
-  }
-
-  .pane__header,
-  .pane__body {
-    border-left: 0;
   }
 
   .sidebar__item__row {