style(console): fix the jwt details page style (#5642)

* style(console): fix the jwt details page style

fix the jwt details page style

* fix(console): remove the unused style

remove the unused style

* fix(console): remove sticky position

remove sticky position

packages/console/src/pages/CustomizeJwtDetails/MainContent/ScriptSection/index.module.scss

@@ -1,12 +1,10 @@
 @use '@/scss/underscore' as _;
 
 .scriptSection {
-  position: sticky;
-  top: 0;
+  position: relative;
   min-width: 50%;
 
   .fixHeightWrapper {
-    margin-bottom: _.unit(3);
     position: absolute;
     inset: 0;
     display: flex;

packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/InstructionTab/index.module.scss

@@ -23,8 +23,3 @@
 .envVariablesField {
   margin-bottom: _.unit(4);
 }
-
-.description {
-  font: var(--font-body-2);
-  color: var(--color-text-secondary);
-}

packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/InstructionTab/index.tsx

@@ -53,7 +53,7 @@ function InstructionTab({ isActive }: Props) {
               ? accessTokenPayloadTypeDefinition
               : clientCredentialsPayloadTypeDefinition
           }
-          height="350px"
+          height="320px"
           theme="logto-dark"
           options={typeDefinitionCodeEditorOptions}
         />
@@ -70,7 +70,7 @@ function InstructionTab({ isActive }: Props) {
             language="typescript"
             className={styles.sampleCode}
             value={jwtCustomizerUserContextTypeDefinition}
-            height="700px"
+            height="400px"
             theme="logto-dark"
             options={typeDefinitionCodeEditorOptions}
           />
@@ -83,7 +83,9 @@ function InstructionTab({ isActive }: Props) {
           setExpendCard(expand ? CardType.FetchExternalData : undefined);
         }}
       >
-        <div className={styles.description}>{t('jwt_claims.fetch_external_data.description')}</div>
+        <div className={tabContentStyles.description}>
+          {t('jwt_claims.fetch_external_data.description')}
+        </div>
         <Editor
           language="typescript"
           className={styles.sampleCode}
@@ -101,7 +103,7 @@ function InstructionTab({ isActive }: Props) {
         }}
       >
         <EnvironmentVariablesField className={styles.envVariablesField} />
-        <div className={styles.description}>
+        <div className={tabContentStyles.description}>
           {t('jwt_claims.environment_variables.sample_code')}
         </div>
         <Editor

packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/TestTab/index.module.scss

@@ -3,3 +3,8 @@
 .error {
   color: var(--color-error);
 }
+
+.codeEditor {
+  min-height: 400px;
+  flex-grow: 1;
+}

packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/TestTab/index.tsx

@@ -108,7 +108,7 @@ function TestTab({ isActive }: Props) {
           }}
           render={({ field }) => (
             <MonacoCodeEditor
-              className={tabContentStyles.flexGrow}
+              className={styles.codeEditor}
               enabledActions={['restore', 'copy']}
               models={editorModels}
               activeModelName={activeModelName}

packages/console/src/pages/CustomizeJwtDetails/MainContent/index.module.scss

@@ -4,14 +4,8 @@
 .content {
   display: flex;
   flex-direction: row;
-  flex-grow: 1;
-  overflow: auto;
-  scrollbar-width: none; /* For Firefox */
-  -ms-overflow-style: none;  /* For Internet Explorer and Edge */
-
-  &::-webkit-scrollbar {
-    display: none; /* For Chrome, Safari and Opera */
-  }
+  flex: 1;
+  margin-bottom: _.unit(3);
 
   > * {
     &:first-child {

packages/console/src/pages/CustomizeJwtDetails/index.module.scss

@@ -1,9 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+  position: relative;
 
   .header {
     flex-shrink: 0;