fix: fixed query result codemirror shake issue upon scroll

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

@@ -178,13 +178,6 @@ export default class QueryEditor extends React.Component {
     );
   }
 
-  /**
-   * Public API for retrieving the DOM client height for this component.
-   */
-  getClientHeight() {
-    return this._node && this._node.clientHeight;
-  }
-
   _onKeyUp = (_cm, event) => {
     if (AUTO_COMPLETE_AFTER_KEY.test(event.key) && this.editor) {
       this.editor.execCommand('autocomplete');

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

@@ -149,7 +149,7 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
         <div className="drag-request" onMouseDown={handleDragbarMouseDown}>
         </div>
 
-        <section className="response-pane px-4 flex-grow">
+        <section className="response-pane flex-grow">
           <ResponsePane
             rightPaneWidth={rightPaneWidth}
             response={item.response}

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

@@ -7,6 +7,10 @@ const StyledWrapper = styled.div`
     height: calc(100vh - 230px);
   }
 
+  textarea.cm-editor {
+    position: relative;
+  }
+
   div.overlay{
     position: absolute;
     top: 0;

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">
+    <StyledWrapper className="mt-4 px-3 w-full" style={{maxWidth: width}}>
       {isLoading && (
         <div className="overlay">
           <div style={{marginBottom: 15, fontSize: 26}}>
@@ -55,10 +55,7 @@ const QueryResult = ({data, isLoading, width}) => {
       )}
       <div className="h-full">
         <textarea
-          id="operation"
+          id="query-result"
-          style={{
-            width: `${width}px`,
-          }}
           ref={editor}
           className="cm-editor"
         >

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

@@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
 
 const ResponseHeaders = ({headers}) => {
   return (
-    <StyledWrapper className="mt-3">
+    <StyledWrapper className="mt-3 px-3">
       <table>
         <thead>
           <tr>

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

@@ -43,7 +43,7 @@ const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
 
   return (
     <StyledWrapper className="flex flex-col h-full">
-      <div className="flex items-center tabs mt-1" role="tablist">
+      <div className="flex items-center px-3 tabs mt-1" role="tablist">
         <div className={getTabClassname('response')} role="tab" onClick={() => setSelectedTab('response')}>Response</div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => setSelectedTab('headers')}>Headers</div>
         {!isLoading ? (