fix(#2605): fix editor view height

This commit is contained in:
Anoop M D 2024-08-05 17:37:01 +05:30
parent adb843faa7
commit 72105c0d66
14 changed files with 23 additions and 27 deletions

2
package-lock.json generated
View File

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

View File

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

View File

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

View File

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

View File

@ -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>

View File

@ -2,7 +2,6 @@ import styled from 'styled-components';
const StyledMarkdownBodyWrapper = styled.div`
background: transparent;
height: inherit;
.markdown-body {
background: transparent;
overflow-y: auto;

View File

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

View File

@ -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 {

View File

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

View File

@ -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 || ''}

View File

@ -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>

View File

@ -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' ? (

View File

@ -14,6 +14,8 @@ const Wrapper = styled.div`
display: none;
}
scrollbar-width: none;
li {
display: inline-flex;
max-width: 150px;

View File

@ -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