From 72105c0d66d669db17cf05a39320e35ee14a430f Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Mon, 5 Aug 2024 17:37:01 +0530
Subject: [PATCH] fix(#2605): fix editor view height

---
 package-lock.json                                         | 2 +-
 .../bruno-app/src/components/CodeEditor/StyledWrapper.js  | 1 +
 packages/bruno-app/src/components/CodeEditor/index.js     | 2 +-
 .../src/components/Documentation/StyledWrapper.js         | 8 --------
 packages/bruno-app/src/components/Documentation/index.js  | 4 ++--
 .../bruno-app/src/components/MarkDown/StyledWrapper.js    | 1 -
 .../src/components/RequestPane/HttpRequestPane/index.js   | 2 +-
 .../components/RequestPane/QueryEditor/StyledWrapper.js   | 1 +
 .../components/RequestPane/RequestBody/StyledWrapper.js   | 4 ----
 .../bruno-app/src/components/RequestPane/Script/index.js  | 8 ++++----
 .../bruno-app/src/components/RequestPane/Vars/index.js    | 4 ++--
 .../bruno-app/src/components/RequestTabPanel/index.js     | 5 ++---
 .../bruno-app/src/components/RequestTabs/StyledWrapper.js | 2 ++
 packages/bruno-app/src/styles/globals.css                 | 6 ++++++
 14 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6792725f..e021bf38 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19668,7 +19668,7 @@
     },
     "packages/bruno-electron": {
       "name": "bruno",
-      "version": "v1.21.0",
+      "version": "v1.23.1",
       "dependencies": {
         "@aws-sdk/credential-providers": "3.525.0",
         "@usebruno/common": "0.1.0",
diff --git a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
index 3623d406..232f964a 100644
--- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
@@ -6,6 +6,7 @@ const StyledWrapper = styled.div`
     border: solid 1px ${(props) => props.theme.codemirror.border};
     font-family: ${(props) => (props.font ? props.font : 'default')};
     line-break: anywhere;
+    flex: 1 1 0;
   }
 
   .CodeMirror-overlayscroll-horizontal div,
diff --git a/packages/bruno-app/src/components/CodeEditor/index.js b/packages/bruno-app/src/components/CodeEditor/index.js
index ddc38aff..c67b2266 100644
--- a/packages/bruno-app/src/components/CodeEditor/index.js
+++ b/packages/bruno-app/src/components/CodeEditor/index.js
@@ -289,7 +289,7 @@ export default class CodeEditor extends React.Component {
     }
     return (
       <StyledWrapper
-        className="h-full w-full"
+        className="h-full w-full flex flex-col relative"
         aria-label="Code Editor"
         font={this.props.font}
         ref={(node) => {
diff --git a/packages/bruno-app/src/components/Documentation/StyledWrapper.js b/packages/bruno-app/src/components/Documentation/StyledWrapper.js
index f0ffee80..f159d94d 100644
--- a/packages/bruno-app/src/components/Documentation/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Documentation/StyledWrapper.js
@@ -1,14 +1,6 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  div.CodeMirror {
-    /* todo: find a better way */
-    height: calc(100vh - 240px);
-
-    .CodeMirror-scroll {
-      padding-bottom: 0px;
-    }
-  }
   .editing-mode {
     cursor: pointer;
     color: ${(props) => props.theme.colors.text.yellow};
diff --git a/packages/bruno-app/src/components/Documentation/index.js b/packages/bruno-app/src/components/Documentation/index.js
index d4b79096..5a391db8 100644
--- a/packages/bruno-app/src/components/Documentation/index.js
+++ b/packages/bruno-app/src/components/Documentation/index.js
@@ -37,8 +37,8 @@ const Documentation = ({ item, collection }) => {
   }
 
   return (
-    <StyledWrapper className="mt-1 h-full w-full relative">
-      <div className="editing-mode mb-2" role="tab" onClick={toggleViewMode}>
+    <StyledWrapper className="flex flex-col gap-y-1 h-full w-full relative">
+      <div className="editing-mode" role="tab" onClick={toggleViewMode}>
         {isEditing ? 'Preview' : 'Edit'}
       </div>
 
diff --git a/packages/bruno-app/src/components/MarkDown/StyledWrapper.js b/packages/bruno-app/src/components/MarkDown/StyledWrapper.js
index 65cb9c23..f834fdab 100644
--- a/packages/bruno-app/src/components/MarkDown/StyledWrapper.js
+++ b/packages/bruno-app/src/components/MarkDown/StyledWrapper.js
@@ -2,7 +2,6 @@ import styled from 'styled-components';
 
 const StyledMarkdownBodyWrapper = styled.div`
   background: transparent;
-  height: inherit;
   .markdown-body {
     background: transparent;
     overflow-y: auto;
diff --git a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
index df90082c..c7d66aad 100644
--- a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
@@ -137,7 +137,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
         ) : null}
       </div>
       <section
-        className={classnames('flex w-full', {
+        className={classnames('flex w-full flex-1', {
           'mt-5': !isMultipleContentTab
         })}
       >
diff --git a/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
index 06f9e4b7..3832f60c 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
@@ -4,6 +4,7 @@ const StyledWrapper = styled.div`
   div.CodeMirror {
     background: ${(props) => props.theme.codemirror.bg};
     border: solid 1px ${(props) => props.theme.codemirror.border};
+    flex: 1 1 0;
   }
 
   textarea.cm-editor {
diff --git a/packages/bruno-app/src/components/RequestPane/RequestBody/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/RequestBody/StyledWrapper.js
index 83ebd814..42da81d6 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestBody/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestBody/StyledWrapper.js
@@ -1,10 +1,6 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  div.CodeMirror {
-    /* todo: find a better way */
-    height: calc(100vh - 220px);
-  }
 `;
 
 export default Wrapper;
diff --git a/packages/bruno-app/src/components/RequestPane/Script/index.js b/packages/bruno-app/src/components/RequestPane/Script/index.js
index 935b52ed..acd674ee 100644
--- a/packages/bruno-app/src/components/RequestPane/Script/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Script/index.js
@@ -40,8 +40,8 @@ const Script = ({ item, collection }) => {
 
   return (
     <StyledWrapper className="w-full flex flex-col">
-      <div className="flex-1 mt-2">
-        <div className="mb-1 title text-xs">Pre Request</div>
+      <div className="flex flex-col flex-1 mt-2 gap-y-2">
+        <div className="title text-xs">Pre Request</div>
         <CodeEditor
           collection={collection}
           value={requestScript || ''}
@@ -53,8 +53,8 @@ const Script = ({ item, collection }) => {
           onSave={onSave}
         />
       </div>
-      <div className="flex-1 mt-6">
-        <div className="mt-1 mb-1 title text-xs">Post Response</div>
+      <div className="flex flex-col flex-1 mt-2 gap-y-2">
+        <div className="title text-xs">Post Response</div>
         <CodeEditor
           collection={collection}
           value={responseScript || ''}
diff --git a/packages/bruno-app/src/components/RequestPane/Vars/index.js b/packages/bruno-app/src/components/RequestPane/Vars/index.js
index 500ebb25..eb292e9c 100644
--- a/packages/bruno-app/src/components/RequestPane/Vars/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Vars/index.js
@@ -9,11 +9,11 @@ const Vars = ({ item, collection }) => {
 
   return (
     <StyledWrapper className="w-full flex flex-col">
-      <div className="flex-1 mt-2">
+      <div className="mt-2">
         <div className="mb-1 title text-xs">Pre Request</div>
         <VarsTable item={item} collection={collection} vars={requestVars} varType="request" />
       </div>
-      <div className="flex-1">
+      <div>
         <div className="mt-1 mb-1 title text-xs">Post Response</div>
         <VarsTable item={item} collection={collection} vars={responseVars} varType="response" />
       </div>
diff --git a/packages/bruno-app/src/components/RequestTabPanel/index.js b/packages/bruno-app/src/components/RequestTabPanel/index.js
index 2fd253f4..ecec4bc9 100644
--- a/packages/bruno-app/src/components/RequestTabPanel/index.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/index.js
@@ -158,10 +158,9 @@ const RequestTabPanel = () => {
       <section className="main flex flex-grow pb-4 relative">
         <section className="request-pane">
           <div
-            className="px-4"
+            className="px-4 h-full"
             style={{
-              width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`,
-              height: `calc(100% - ${DEFAULT_PADDING}px)`
+              width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`
             }}
           >
             {item.type === 'graphql-request' ? (
diff --git a/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js b/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
index ec76ec5b..26399d97 100644
--- a/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
@@ -14,6 +14,8 @@ const Wrapper = styled.div`
       display: none;
     }
 
+    scrollbar-width: none;
+
     li {
       display: inline-flex;
       max-width: 150px;
diff --git a/packages/bruno-app/src/styles/globals.css b/packages/bruno-app/src/styles/globals.css
index 29e9196e..79c2a962 100644
--- a/packages/bruno-app/src/styles/globals.css
+++ b/packages/bruno-app/src/styles/globals.css
@@ -58,6 +58,12 @@ body::-webkit-scrollbar-thumb,
   border-radius: 5rem;
 }
 
+* {
+  /* This ensures that scrollbars are only visible when the user starts to scroll,
+  providing a cleaner and more minimalistic appearance. */
+  scrollbar-width: thin;
+}
+
 /*
  * todo: this will be supported in the future to be changed via applying a theme
  * making all the checkboxes and radios bigger