fix(#2605): fix editor view height (#2758)

* fix(#2605): fix editor view height

* chore: disabled prettier on github actions

.github/workflows/tests.yml

@@ -71,15 +71,3 @@ jobs:
         with:
           files: packages/bruno-tests/collection/junit.xml
           comment_mode: always
-  prettier:
-    name: Prettier
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps
-      - name: Run Prettier
-        run: npm run test:prettier:web

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",

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,

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) => {

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};

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">
+    <StyledWrapper className="flex flex-col gap-y-1 h-full w-full relative">
-      <div className="editing-mode mb-2" role="tab" onClick={toggleViewMode}>
+      <div className="editing-mode" role="tab" onClick={toggleViewMode}>
         {isEditing ? 'Preview' : 'Edit'}
       </div>
 

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;

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
         })}
       >

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 {

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;

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="flex flex-col flex-1 mt-2 gap-y-2">
-        <div className="mb-1 title text-xs">Pre Request</div>
+        <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="flex flex-col flex-1 mt-2 gap-y-2">
-        <div className="mt-1 mb-1 title text-xs">Post Response</div>
+        <div className="title text-xs">Post Response</div>
         <CodeEditor
           collection={collection}
           value={responseScript || ''}

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>

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`,
+              width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`
-              height: `calc(100% - ${DEFAULT_PADDING}px)`
             }}
           >
             {item.type === 'graphql-request' ? (

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;

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