From 80a20b71e1d75961eb94e4c814c162cb09c36145 Mon Sep 17 00:00:00 2001
From: rdmclin2 <rdmclin2@gmail.com>
Date: Sun, 11 Feb 2024 23:14:53 +0800
Subject: [PATCH] :bug: fix: code panel scroll

---
 src/Markdown/style.ts                    |  4 ++++
 src/Markdown/wrapper.tsx                 | 10 ++--------
 src/ProBuilder/components/Code/index.tsx |  5 +++--
 src/ProBuilder/components/Code/style.ts  |  2 +-
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/Markdown/style.ts b/src/Markdown/style.ts
index a8080594..ad061221 100644
--- a/src/Markdown/style.ts
+++ b/src/Markdown/style.ts
@@ -183,6 +183,10 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }) => {
         border-radius: ${token.borderRadius}px;
       `,
     ),
+    highlighter: css`
+      max-height: 400px;
+      overflow: scroll;
+    `,
     header: cx(
       `${prefix}-header`,
       css`
diff --git a/src/Markdown/wrapper.tsx b/src/Markdown/wrapper.tsx
index a854b62c..ad8432cf 100644
--- a/src/Markdown/wrapper.tsx
+++ b/src/Markdown/wrapper.tsx
@@ -45,13 +45,7 @@ const HighlightWrapper = memo((props: HighlightWrapperProps) => {
 
   const highlightBlock = useMemo(() => {
     return (
-      <Highlight
-        language={lang?.toLowerCase()}
-        copyable={false}
-        showLanguage={false}
-        type="block"
-        style={{ maxHeight: 400, overflowY: 'scroll' }}
-      >
+      <Highlight language={lang?.toLowerCase()} copyable={false} showLanguage={false} type="block">
         {children}
       </Highlight>
     );
@@ -87,7 +81,7 @@ const HighlightWrapper = memo((props: HighlightWrapperProps) => {
         />
         <CopyButton className={styles.copy} content={children} />
       </Flexbox>
-      {expand ? highlightBlock : null}
+      <div className={styles.highlighter}>{expand ? highlightBlock : null}</div>
     </div>
   );
 });
diff --git a/src/ProBuilder/components/Code/index.tsx b/src/ProBuilder/components/Code/index.tsx
index 46d1b818..afe03f5d 100644
--- a/src/ProBuilder/components/Code/index.tsx
+++ b/src/ProBuilder/components/Code/index.tsx
@@ -61,13 +61,14 @@ export const CodePanel: FC<CodePanelProps> = memo((props) => {
           {/* 右侧按钮区域 */}
         </Flexbox>
       </Flexbox>
-      <Flexbox className={styles.code} style={{ height: `calc(100% - ${HEADER_HEIGHT}px)` }}>
+      <Flexbox className={styles.code}>
         <Highlight
           theme={isDarkMode ? 'dark' : 'light'}
           lineNumber
           language="tsx"
           onCopy={onCopy}
-          style={{ height: '100%' }}
+          showLanguage={false}
+          style={{ height: '100%', overflow: 'auto' }}
         >
           {configCode}
         </Highlight>
diff --git a/src/ProBuilder/components/Code/style.ts b/src/ProBuilder/components/Code/style.ts
index ec1e81ce..9c248fd7 100644
--- a/src/ProBuilder/components/Code/style.ts
+++ b/src/ProBuilder/components/Code/style.ts
@@ -29,7 +29,7 @@ export const useStyles = createStyles(({ token, stylish, css }) => {
     `,
     code: css`
       background: ${token.colorFillQuaternary};
-      overflow: scroll;
+      height: 100%;
     `,
   };
 });