chore(console): update style

packages/console/src/components/SubmitFormChangesActionBar/index.tsx

@@ -11,6 +11,7 @@ type Props = {
   onSubmit: () => Promise<void>;
   onDiscard: () => void;
   confirmText?: AdminConsoleKey;
+  className?: string;
 };
 
 function SubmitFormChangesActionBar({
@@ -19,9 +20,10 @@ function SubmitFormChangesActionBar({
   confirmText = 'general.save_changes',
   onSubmit,
   onDiscard,
+  className,
 }: Props) {
   return (
-    <div className={classNames(styles.container, isOpen && styles.active)}>
+    <div className={classNames(styles.container, isOpen && styles.active, className)}>
       <div className={styles.actionBar}>
         <Button
           size="medium"

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

@@ -71,13 +71,23 @@
     }
   }
 
-  .editorContainer {
-    position: relative;
+  .body {
+    display: flex;
+    flex-direction: column;
     flex-grow: 1;
 
-    &.dashboardOpen {
-      flex-grow: 0;
-      height: 50%;
+    .editorContainer {
+      position: relative;
+      flex-grow: 1;
+
+      &.dashboardOpen {
+        flex-grow: 0;
+        height: 50%;
+      }
+    }
+
+    .resultPanel {
+      border-radius: 0 0 8px 8px;
     }
   }
 }

packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.tsx

@@ -176,28 +176,30 @@ function MonacoCodeEditor({
           {actionButtons}
         </div>
       </header>
-      <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 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>
-      {dashboard && <DashBoard {...dashboard} />}
     </div>
   );
 }

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

@@ -1,18 +1,20 @@
 @use '@/scss/underscore' as _;
 
-.scripeSection {
-  position: relative;
+.scriptSection {
+  position: sticky;
+  top: 0;
   min-width: 50%;
 
   .fixHeightWrapper {
+    margin-bottom: _.unit(3);
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
   }
 
   .codeEditor {
-    min-height: 200px;
+    min-height: 400px;
     flex-grow: 1;
   }
 }

packages/console/src/pages/CustomizeJwtDetails/MainContent/ScriptSection/index.tsx

@@ -74,7 +74,7 @@ function ScriptSection() {
   }, [setTestResult, t, testResult]);
 
   return (
-    <div className={styles.scripeSection}>
+    <div className={styles.scriptSection}>
       <div className={styles.fixHeightWrapper}>
         <Controller
           control={control}

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

@@ -61,4 +61,5 @@
 
 .flexGrow {
   flex: 1;
+  min-height: 200px;
 }

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

@@ -14,8 +14,6 @@
   }
 
   > * {
-    margin-bottom: _.unit(6);
-
     &:first-child {
       margin-right: _.unit(3);
       flex: 9;
@@ -26,3 +24,9 @@
     }
   }
 }
+
+.submitActionBar {
+  &.overwrite {
+    margin-top: 0;
+  }
+}

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

@@ -90,6 +90,7 @@ function MainContent<T extends LogtoJwtTokenKeyType>({
         isOpen={isDirty || action === 'create'}
         isSubmitting={isSubmitting}
         confirmText={action === 'create' ? 'general.create' : 'general.save_changes'}
+        className={classNames(styles.submitActionBar, styles.overwrite)}
         onDiscard={
           // If the form is in create mode, navigate back to the previous page
           action === 'create'

packages/console/src/pages/CustomizeJwtDetails/utils/config.tsx

@@ -32,7 +32,7 @@ declare global {
 
   export interface Exports {
     /**
-     * This function is called to get custom claims for the JWT token.
+     * This function is called during the access token generation process to get custom claims for the JWT token.
      * 
      * @param {${JwtCustomizerTypeDefinitionKey.AccessTokenPayload}} token -The JWT token.
      * @param {Data} data - Logto internal data that can be used to pass additional information
@@ -56,7 +56,7 @@ declare global {
 
   export interface Exports {
     /**
-     * This function is called to get custom claims for the JWT token.
+     * This function is called during the access token generation process to get custom claims for the JWT token.
      * 
      * @param {${JwtCustomizerTypeDefinitionKey.ClientCredentialsPayload}} token -The JWT token.
      * 
@@ -72,7 +72,8 @@ export { exports as default };
 `;
 
 export const defaultAccessTokenJwtCustomizerCode = `/**
-* This function is called to get custom claims for the JWT token.
+* This function is called during the access token generation process to get custom claims for the JWT token.
+* Limit custom claims to under 50KB.
 * 
 * @param {${JwtCustomizerTypeDefinitionKey.AccessTokenPayload}} token -The JWT token.
 * @param {Data} data - Logto internal data that can be used to pass additional information
@@ -87,7 +88,8 @@ exports.getCustomJwtClaims = async (token, data, envVariables) => {
 }`;
 
 export const defaultClientCredentialsJwtCustomizerCode = `/**
-* This function is called to get custom claims for the JWT token.
+* This function is called during the access token generation process to get custom claims for the JWT token.
+* Limit custom claims to under 50KB.
 *
 * @param {${JwtCustomizerTypeDefinitionKey.ClientCredentialsPayload}} token -The JWT token.
 * @param {${JwtCustomizerTypeDefinitionKey.EnvironmentVariables}} [envVariables] - The environment variables.