From 0d3765ad66c11ed047deda1b0d8b26ae83235547 Mon Sep 17 00:00:00 2001
From: Nick Boyadjian <nboyadjian95@gmail.com>
Date: Thu, 4 Jul 2024 01:56:34 -0400
Subject: [PATCH] fix scrolling issue by setting the height of the CodeMirror
 using (#1058)

flex

Co-authored-by: Nick Boyadjian <nick.boyadjian@podium.com>
Co-authored-by: Anoop M D <anoop.md1421@gmail.com>
---
 .../src/components/RequestPane/GraphQLRequestPane/index.js      | 2 +-
 .../src/components/RequestPane/QueryEditor/StyledWrapper.js     | 2 --
 .../bruno-app/src/components/RequestPane/QueryEditor/index.js   | 2 +-
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
index 5bdd9c5e7..d9a86813e 100644
--- a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
@@ -151,7 +151,7 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
         </div>
         <GraphQLSchemaActions item={item} collection={collection} onSchemaLoad={setSchema} toggleDocs={toggleDocs} />
       </div>
-      <section className="flex w-full mt-5">{getTabPanel(focusedTab.requestPaneTab)}</section>
+      <section className="flex w-full mt-5 flex-1">{getTabPanel(focusedTab.requestPaneTab)}</section>
     </StyledWrapper>
   );
 };
diff --git a/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
index 99d5ed3b9..06f9e4b78 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
@@ -4,8 +4,6 @@ const StyledWrapper = styled.div`
   div.CodeMirror {
     background: ${(props) => props.theme.codemirror.bg};
     border: solid 1px ${(props) => props.theme.codemirror.border};
-    /* todo: find a better way */
-    height: calc(100vh - 220px);
   }
 
   textarea.cm-editor {
diff --git a/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js b/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js
index 598af0212..84b14f8dc 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js
@@ -209,7 +209,7 @@ export default class QueryEditor extends React.Component {
     return (
       <>
         <StyledWrapper
-          className="h-full w-full relative"
+          className="h-full w-full  flex flex-col relative"
           aria-label="Query Editor"
           ref={(node) => {
             this._node = node;