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