stuff

app/containers/App.js

@@ -117,10 +117,10 @@ class App extends Component {
                   }}
                 />
               </TabPanel>
-              <TabPanel className="pad grid__cell">
-                <div className="grid--v grid--start wide">
+              <TabPanel className="grid__cell scrollable">
+                <div className="grid--v grid--start wide pad">
                   {!activeResponse ? null : activeResponse.headers.map((h, i) => (
-                    <div className="grid__cell grid selectable tall" key={i}>
+                    <div className="grid grid__cell grid__cell--no-flex selectable" key={i}>
                       <div className="grid__cell">{h.name}</div>
                       <div className="grid__cell">{h.value}</div>
                     </div>

app/css/components/editor.scss

@@ -11,13 +11,12 @@
   flex: 1 1 100%;
 
   .editor {
-    position: absolute;
-    width: 100%;
-    height: 100%;
     box-sizing: border-box;
+    position: absolute;
+    height: 100% !important;
+    width: 100%;
 
     .CodeMirror {
-      position: absolute;
       height: 100% !important;
       width: 100%;
       font-family: "Source Code Pro", monospace;

app/css/components/grid.scss

@@ -23,7 +23,7 @@
 
   & > .grid__cell {
     display: flex;
-    flex: 1 1 100%;
+    flex: 1 1 auto;
     box-sizing: border-box;
 
     &.grid__cell--no-flex {

app/css/components/tabs.scss

@@ -2,6 +2,7 @@
 @import '../constants/dimensions';
 
 .ReactTabs {
+  position: relative;
   .ReactTabs__TabList {
     flex-shrink: 0;
     align-items: flex-start;
@@ -28,7 +29,15 @@
     }
   }
 
+  .tab-panel-wrapper {
+    width: 100%;
+    height: 100%;
+  }
+
   .ReactTabs__TabPanel {
+    //position: absolute;
+    //width: 100%;
+    //height: 100%;
     //border-top: 1px solid $hl-sm;
   }
 }