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'],
  )}