fix: code scrollbar align

Signed-off-by: Innei <i@innei.in>
Innei · Mar 17, 2024 · 2d9fa2f · 2d9fa2f
1 parent e76df6f
commit 2d9fa2f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git 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
@@ -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'],
             )}