fixed css which was causing layout issues with the GraphiQL editor

skevy · Aug 25, 2015 · 1c76329 · 1c76329
1 parent 5f8ca2d
commit 1c76329
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/app/app.css b/app/app.css
@@ -28,6 +28,18 @@ body {
 .wrapper {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.graphiql-wrapper {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+#graphiql-container {
+  flex: 1;
 }
 
 .config-form {

diff --git a/app/components/App.js b/app/components/App.js
@@ -90,10 +90,12 @@ export default class App extends React.Component {
             <a href="javascript:;" onClick={this.openHeaderEdit}>Edit HTTP Headers</a>
           </div>
         </div>
-        {
-          // THIS IS THE GROSSEST THING I'VE EVER DONE AND I HATE IT. FIX ASAP
-        }
-        <GraphiQL key={this.state.endpoint + JSON.stringify(this.state.headers)} fetcher={this.graphQLFetcher}  />
+        <div className="graphiql-wrapper">
+          {
+            // THIS IS THE GROSSEST THING I'VE EVER DONE AND I HATE IT. FIX ASAP
+          }
+          <GraphiQL key={this.state.endpoint + JSON.stringify(this.state.headers)} fetcher={this.graphQLFetcher}  />
+        </div>
 
         <Modal isOpen={this.state.headerEditOpen} onRequestClose={this.closeModal}>
           <HTTPHeaderEditor