fix(console): fix test result panel overflow bug

fix test result panel overflow bug
logto-io · Apr 8, 2024 · aa4892c · aa4892c
1 parent a6a32c5
commit aa4892c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 37 deletions.
diff --git a/...ages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss b/...ages/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%;
-      }
+    &.dashboardOpen {
+      flex-grow: 0;
+      height: calc(50% - 64px); // 64px = header height
     }
+  }
 
-    .resultPanel {
-      border-radius: 0 0 8px 8px;
-    }
+  .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
@@ -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>
   );
 }