From 66abc50c6cebad894bdf6d19f4148461ff2abf13 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Mon, 8 Apr 2024 10:48:26 +0800
Subject: [PATCH] fix(console): fix test result panel overflow bug (#5643)

fix test result panel overflow bug
---
 .../MonacoCodeEditor/index.module.scss        | 24 ++++------
 .../MainContent/MonacoCodeEditor/index.tsx    | 44 +++++++++----------
 2 files changed, 30 insertions(+), 38 deletions(-)

diff --git a/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss
index 2896c53cc..601a41e42 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss
+++ b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss
@@ -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;
+  }
 }
diff --git a/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.tsx b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.tsx
index d9ff37055..ad9c0a8fd 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.tsx
+++ b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.tsx
@@ -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>
   );
 }