0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-30 20:33:54 -05:00

fix(console): fix test result panel overflow bug (#5643)

fix test result panel overflow bug
This commit is contained in:
simeng-li 2024-04-08 10:48:26 +08:00 committed by GitHub
parent cfeb98c06f
commit 66abc50c6c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 30 additions and 38 deletions

View file

@ -71,23 +71,17 @@
}
}
.body {
display: flex;
flex-direction: column;
.editorContainer {
position: relative;
flex-grow: 1;
.editorContainer {
position: relative;
flex-grow: 1;
&.dashboardOpen {
flex-grow: 0;
height: 50%;
}
}
.resultPanel {
border-radius: 0 0 8px 8px;
&.dashboardOpen {
flex-grow: 0;
height: calc(50% - 64px); // 64px = header height
}
}
.resultPanel {
border-radius: 0 0 8px 8px;
}
}

View file

@ -176,30 +176,28 @@ function MonacoCodeEditor({
{actionButtons}
</div>
</header>
<div className={styles.body}>
<div
ref={containerRef}
className={classNames(styles.editorContainer, dashboard && styles.dashboardOpen)}
>
{activeModel && (
<Editor
height={editorHeight}
language={activeModel.language}
path={activeModel.name}
theme="logto-dark"
options={{
...defaultOptions,
...activeModel.options,
}}
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty string is falsy
value={value || activeModel.defaultValue}
onMount={handleEditorDidMount}
onChange={onChange}
/>
)}
</div>
{dashboard && <DashBoard {...dashboard} className={styles.resultPanel} />}
<div
ref={containerRef}
className={classNames(styles.editorContainer, dashboard && styles.dashboardOpen)}
>
{activeModel && (
<Editor
height={editorHeight}
language={activeModel.language}
path={activeModel.name}
theme="logto-dark"
options={{
...defaultOptions,
...activeModel.options,
}}
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty string is falsy
value={value || activeModel.defaultValue}
onMount={handleEditorDidMount}
onChange={onChange}
/>
)}
</div>
{dashboard && <DashBoard {...dashboard} className={styles.resultPanel} />}
</div>
);
}