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>
This commit is contained in:
Nick Boyadjian 2024-07-04 01:56:34 -04:00 committed by GitHub
parent bd61e453ee
commit 0d3765ad66
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 2 additions and 4 deletions

View File

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

View File

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

View File

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