From 0ce2754a34eb3844c74b73977863cdf6471834f9 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Tue, 21 Jan 2025 11:58:25 +0800
Subject: [PATCH] fix(theme): improve code block scrollbar, close #427 (#435)

---
 plugins/plugin-md-power/src/client/components/CodeTabs.vue | 2 ++
 theme/src/client/styles/code.css                           | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/plugins/plugin-md-power/src/client/components/CodeTabs.vue b/plugins/plugin-md-power/src/client/components/CodeTabs.vue
index 95afd174..847b83a4 100644
--- a/plugins/plugin-md-power/src/client/components/CodeTabs.vue
+++ b/plugins/plugin-md-power/src/client/components/CodeTabs.vue
@@ -134,6 +134,8 @@ function onTabNavClick(index: number): void {
   border-radius: 6px 6px 0 0;
   box-shadow: inset 0 -1px var(--vp-code-tab-divider);
   transition: background-color var(--vp-t-color), box-shadow var(--vp-t-color);
+
+  scrollbar-width: thin;
 }
 
 @media print {
diff --git a/theme/src/client/styles/code.css b/theme/src/client/styles/code.css
index 0565838d..4387a8cd 100644
--- a/theme/src/client/styles/code.css
+++ b/theme/src/client/styles/code.css
@@ -13,6 +13,8 @@ html:not([data-theme="dark"]) .vp-code span {
   overflow-x: auto;
   background-color: var(--vp-code-block-bg);
   transition: background-color var(--vp-t-color);
+
+  scrollbar-width: thin;
 }
 
 @media (min-width: 640px) {