Fixed grid responsiveness

app/containers/App.js

@@ -26,8 +26,9 @@ class App extends Component {
     }
 
     return (
-      <div className="grid__cell grid grid-collapse">
-        <section className="grid__cell grid--v section">
+      <div className="grid__cell grid grid--collapse">
+        <section className="grid__cell section">
+          <div className="grid--v wide">
             <div className="grid__cell grid__cell--no-flex section__header">
               <RequestUrlBar
                 onUrlChange={url => {actions.updateRequest({id: activeRequest.id, url})}}
@@ -39,16 +40,24 @@ class App extends Component {
                   selectedIndex={tabs.request || 0}>
               <TabList className="grid grid--start">
                 <Tab><button className="btn btn--compact">Body</button></Tab>
-              <Tab><button className="btn btn--compact">Params</button></Tab>
+                <Tab>
+                  <button className="btn btn--compact no-wrap">
+                    Params {activeRequest.params.length ? `(${activeRequest.params.length})` : ''}
+                  </button>
+                </Tab>
                 <Tab><button className="btn btn--compact">Auth</button></Tab>
-              <Tab><button className="btn btn--compact">Headers</button></Tab>
+                <Tab>
+                  <button className="btn btn--compact no-wrap">
+                    Headers {activeRequest.headers.length ? `(${activeRequest.headers.length})` : ''}
+                  </button>
+                </Tab>
               </TabList>
               <TabPanel className="grid__cell relative">
                 <RequestBodyEditor
                   onChange={body => {actions.updateRequest({id: activeRequest.id, body})}}
                   request={activeRequest}/>
               </TabPanel>
-            <TabPanel className="grid__cell">
+              <TabPanel className="grid__cell scrollable">
                 <KeyValueEditor
                   pairs={activeRequest.params}
                   onChange={params => actions.updateRequest({id: activeRequest.id, params})}
@@ -62,9 +71,12 @@ class App extends Component {
                 />
               </TabPanel>
             </Tabs>
+          </div>
         </section>
-        <section className="grid__cell grid--v section">
-          <header className="grid grid--center header text-center bg-light txt-sm section__header">
+        <section className="grid__cell section">
+          <div className="grid--v wide">
+            <header
+              className="grid grid--center header text-center bg-light txt-sm section__header">
               <div className="tag success"><strong>200</strong>&nbsp;SUCCESS</div>
               <div className="tag">TIME&nbsp;<strong>143ms</strong></div>
             </header>
@@ -94,6 +106,7 @@ class App extends Component {
               </TabPanel>
               <TabPanel className="pad grid__cell">Headers</TabPanel>
             </Tabs>
+          </div>
         </section>
       </div>
     )

app/css/components/grid.scss

@@ -36,30 +36,29 @@
 .grid {
   max-width: 100%;
   flex-direction: row;
+
+  & > .grid__cell {
+    // So the cells are equal width
+    width: 100%;
+  }
 }
 
 .grid--v {
   max-height: 100%;
   flex-direction: column;
+
+  & > .grid__cell {
+    // So the cells are equal height
+    height: 100%;
+  }
 }
 
 @media (max-width: $breakpoint-md) {
-  .grid.grid-collapse {
-    display: flex;
+  .grid.grid--collapse {
     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;
 
-    & > .col {
-      display: block;
-      flex: 1 1 auto;
+    & > .grid__cell {
       height: 100%;
-      box-sizing: border-box;
     }
   }
 }

app/css/constants/dimensions.scss

@@ -30,7 +30,7 @@ $radius-md: 2px;
 $modal-width: 50rem;
 
 /* Breakpoints */
-$breakpoint-md: 780px;
+$breakpoint-md: 790px;
 $breakpoint-sm: 580px;
 
 .pad {

electron.js

@@ -21,7 +21,7 @@ app.on('ready', function () {
     width: IS_DEV ? 1600 : 1200,
     height: 800,
     minHeight: 500,
-    minWidth: 480,
+    minWidth: 500,
     acceptFirstMouse: true
     // titleBarStyle: IS_MAC ? 'hidden-inset' : 'default'
   });
@@ -41,5 +41,4 @@ app.on('ready', function () {
     // when you should delete the corresponding element.
     mainWindow = null;
   });
-})
-;
+});