chore: codemirror editor occupy remaing height

packages/grafnode-components/src/components/GraphQLRequestPane/StyledWrapper.js

@@ -50,9 +50,6 @@ const StyledWrapper = styled.div`
     }
   }
 
-  .react-tabs__tab-panel--selected {
-    height: 90%;
-  }
 `;
 
 export default StyledWrapper;

packages/grafnode-components/src/components/GraphQLRequestPane/index.js

@@ -13,13 +13,15 @@ const GraphQLRequestPane = ({onRunQuery, schema, leftPaneWidth, value, onQueryCh
           <Tab tabIndex="-1">Headers</Tab>
         </TabList>
         <TabPanel>
-          <QueryEditor
+          <div className="mt-4">
-            schema={schema}
+            <QueryEditor
-            width={leftPaneWidth}
+              schema={schema}
-            value={value}
+              width={leftPaneWidth}
-            onRunQuery={onRunQuery}
+              value={value}
-            onEdit={onQueryChange}
+              onRunQuery={onRunQuery}
-          />
+              onEdit={onQueryChange}
+            />
+          </div>
         </TabPanel>
         <TabPanel>
           <RequestHeaders />

packages/grafnode-components/src/components/QueryEditor/StyledWrapper.js

@@ -3,7 +3,8 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
   div.CodeMirror {
     border: solid 1px var(--color-codemirror-border);
-    height: 96%;
+    /* todo: find a better way */
+    height: calc(100vh - 230px);
   }
 
   textarea.cm-editor {

packages/grafnode-components/src/components/QueryEditor/index.js

@@ -169,7 +169,7 @@ export default class QueryEditor extends React.Component {
   render() {
     return (
       <StyledWrapper
-        className="mt-4 h-full"
+        className="h-full"
         aria-label="Query Editor"
         ref={node => {
           this._node = node;

packages/grafnode-components/src/components/ResponsePane/QueryResult/StyledWrapper.js

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
   div.CodeMirror {
     border: solid 1px var(--color-codemirror-border);
+    /* todo: find a better way */
+    height: calc(100vh - 230px);
   }
 
   div.overlay{

packages/grafnode-components/src/components/ResponsePane/QueryResult/index.js

@@ -37,7 +37,7 @@ const QueryResult = ({data, isLoading, width}) => {
   }, [editor.current, cmEditor, data]);
 
   return (
-    <StyledWrapper className="mt-4 w-full" style={{position: 'relative', height: '90%'}}>
+    <StyledWrapper className="mt-4 w-full">
       {isLoading && (
         <div className="overlay">
           <div style={{marginBottom: 15, fontSize: 26}}>
@@ -53,7 +53,7 @@ const QueryResult = ({data, isLoading, width}) => {
           </button>
         </div>
       )}
-      <div>
+      <div className="h-full">
         <textarea
           id="operation"
           style={{

packages/grafnode-components/src/components/ResponsePane/ResponseTime/index.js

@@ -6,8 +6,8 @@ const ResponseTime = ({duration}) => {
 
   if(duration > 1000 ) { // duration greater than a second
     let seconds =  Math.floor(duration / 1000);
-    let decimal =  ((duration % 1000) / 1000).toFixed(2) * 100;
+    let decimal =  ((duration % 1000) / 1000) * 100;
-    durationToDisplay = seconds + '.' +  decimal + 's';
+    durationToDisplay = seconds + '.' +  decimal.toFixed(0) + 's';
   } else {
     durationToDisplay = duration + 'ms'
   }