From b30fed04c2b437288e6e57937dac2e6d41e2f994 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Sat, 9 Apr 2016 12:10:34 -0700
Subject: [PATCH] Fixed grid responsiveness

---
 app/containers/App.js             | 129 ++++++++++++++++--------------
 app/css/components/grid.scss      |  25 +++---
 app/css/constants/dimensions.scss |   2 +-
 electron.js                       |   5 +-
 4 files changed, 86 insertions(+), 75 deletions(-)

diff --git a/app/containers/App.js b/app/containers/App.js
index 526403416f..e135c94e5b 100644
--- a/app/containers/App.js
+++ b/app/containers/App.js
@@ -26,74 +26,87 @@ class App extends Component {
     }
 
     return (
-      <div className="grid__cell grid grid-collapse">
-        <section className="grid__cell grid--v section">
-          <div className="grid__cell grid__cell--no-flex section__header">
-            <RequestUrlBar
-              onUrlChange={url => {actions.updateRequest({id: activeRequest.id, url})}}
-              onMethodChange={method => {actions.updateRequest({id: activeRequest.id, method})}}
-              request={activeRequest}/>
-          </div>
-          <Tabs className="grid__cell grid--v section__body"
-                onSelect={i => actions.selectTab('request', i)}
-                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">Auth</button></Tab>
-              <Tab><button className="btn btn--compact">Headers</button></Tab>
-            </TabList>
-            <TabPanel className="grid__cell relative">
-              <RequestBodyEditor
-                onChange={body => {actions.updateRequest({id: activeRequest.id, body})}}
+      <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})}}
+                onMethodChange={method => {actions.updateRequest({id: activeRequest.id, method})}}
                 request={activeRequest}/>
-            </TabPanel>
-            <TabPanel className="grid__cell">
-              <KeyValueEditor
-                pairs={activeRequest.params}
-                onChange={params => actions.updateRequest({id: activeRequest.id, params})}
-              />
-            </TabPanel>
-            <TabPanel className="grid__cell pad">Basic Auth</TabPanel>
-            <TabPanel className="grid__cell">
-              <KeyValueEditor
-                pairs={activeRequest.headers}
-                onChange={headers => actions.updateRequest({id: activeRequest.id, headers})}
-              />
-            </TabPanel>
-          </Tabs>
+            </div>
+            <Tabs className="grid__cell grid--v section__body"
+                  onSelect={i => actions.selectTab('request', i)}
+                  selectedIndex={tabs.request || 0}>
+              <TabList className="grid grid--start">
+                <Tab><button className="btn btn--compact">Body</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 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 scrollable">
+                <KeyValueEditor
+                  pairs={activeRequest.params}
+                  onChange={params => actions.updateRequest({id: activeRequest.id, params})}
+                />
+              </TabPanel>
+              <TabPanel className="grid__cell pad">Basic Auth</TabPanel>
+              <TabPanel className="grid__cell">
+                <KeyValueEditor
+                  pairs={activeRequest.headers}
+                  onChange={headers => actions.updateRequest({id: activeRequest.id, headers})}
+                />
+              </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">
-            <div className="tag success"><strong>200</strong>&nbsp;SUCCESS</div>
-            <div className="tag">TIME&nbsp;<strong>143ms</strong></div>
-          </header>
-          <Tabs selectedIndex={0} className="grid__cell grid--v section__body">
-            <TabList className="grid grid--start">
-              <Tab><button className="btn btn--compact">Preview</button></Tab>
-              <Tab><button className="btn btn--compact">Raw</button></Tab>
-              <Tab><button className="btn btn--compact">Headers</button></Tab>
-            </TabList>
-            <TabPanel className="grid__cell">
-              <Editor
-                options={{
+        <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>
+            <Tabs selectedIndex={0} className="grid__cell grid--v section__body">
+              <TabList className="grid grid--start">
+                <Tab><button className="btn btn--compact">Preview</button></Tab>
+                <Tab><button className="btn btn--compact">Raw</button></Tab>
+                <Tab><button className="btn btn--compact">Headers</button></Tab>
+              </TabList>
+              <TabPanel className="grid__cell">
+                <Editor
+                  options={{
                   mode: 'application/json',
                   readOnly: true,
                   placeholder: 'nothing yet...'
                 }}
-              />
-            </TabPanel>
-            <TabPanel className="grid__cell">
-              <Editor
-                options={{
+                />
+              </TabPanel>
+              <TabPanel className="grid__cell">
+                <Editor
+                  options={{
                   mode: 'application/json',
                   readOnly: true,
                   placeholder: 'nothing yet...'
                 }}
-              />
-            </TabPanel>
-            <TabPanel className="pad grid__cell">Headers</TabPanel>
-          </Tabs>
+                />
+              </TabPanel>
+              <TabPanel className="pad grid__cell">Headers</TabPanel>
+            </Tabs>
+          </div>
         </section>
       </div>
     )
diff --git a/app/css/components/grid.scss b/app/css/components/grid.scss
index 117e2c0958..e32d714075 100644
--- a/app/css/components/grid.scss
+++ b/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;
     }
   }
 }
diff --git a/app/css/constants/dimensions.scss b/app/css/constants/dimensions.scss
index a8378b6a6a..1d1908de05 100644
--- a/app/css/constants/dimensions.scss
+++ b/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 {
diff --git a/electron.js b/electron.js
index ae3c1f0e19..6e8d0e1f56 100644
--- a/electron.js
+++ b/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;
   });
-})
-;
+});