From 2d9fa2fa314a1f6a3099ad24f3c62e1e52e37ac9 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Sun, 17 Mar 2024 19:26:42 +0800
Subject: [PATCH] fix: code scrollbar align

Signed-off-by: Innei <i@innei.in>
---
 .../ui/code-highlighter/shiki/Shiki.module.css           | 9 +++++++--
 src/components/ui/code-highlighter/shiki/Shiki.tsx       | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/code-highlighter/shiki/Shiki.module.css b/src/components/ui/code-highlighter/shiki/Shiki.module.css
index 91652f0af6..3ac8983791 100644
--- a/src/components/ui/code-highlighter/shiki/Shiki.module.css
+++ b/src/components/ui/code-highlighter/shiki/Shiki.module.css
@@ -89,7 +89,12 @@
     }
   }
 
-  .scroll-container::-webkit-scrollbar-track {
-    margin: 10px; /* 滚动条顶部间距 */
+  .scroll-container pre::-webkit-scrollbar-track {
+    margin-left: 3rem;
+    margin-right: 8rem;
+  }
+
+  .scroll-container pre::-webkit-scrollbar {
+    background-color: transparent !important;
   }
 }
diff --git a/src/components/ui/code-highlighter/shiki/Shiki.tsx b/src/components/ui/code-highlighter/shiki/Shiki.tsx
index ba13e65e9a..8cfcb4ca59 100644
--- a/src/components/ui/code-highlighter/shiki/Shiki.tsx
+++ b/src/components/ui/code-highlighter/shiki/Shiki.tsx
@@ -152,7 +152,7 @@ export const ShikiHighLighter: FC<Props> = (props) => {
           <div
             ref={setCodeBlockRef}
             className={clsxm(
-              'relative max-h-[50vh] w-full overflow-auto scrollbar-none',
+              'relative max-h-[50vh] w-full overflow-auto',
               !isCollapsed ? '!max-h-[100%]' : isOverflow ? maskClassName : '',
               styles['scroll-container'],
             )}