From 60e49128cb6250698116ff5a10175ae6a7c6b4be Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Mon, 15 Jun 2026 15:37:07 +0800
Subject: [PATCH] fix(grid): show data grid vertical scrollbar

---
 apps/desktop/src/components/grid/DataGrid.vue | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index a0438d00b..c5ec8bf87 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -7761,11 +7761,34 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
   scrollbar-gutter: stable;
   will-change: scroll-position;
   contain: layout style paint;
-  scrollbar-width: none;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in oklch, var(--foreground) 30%, transparent) transparent;
 }
 
 .data-grid-scroller::-webkit-scrollbar {
-  display: none;
+  width: 10px;
+  height: 0;
+}
+
+.data-grid-scroller::-webkit-scrollbar:horizontal {
+  height: 0;
+}
+
+.data-grid-scroller::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.data-grid-scroller::-webkit-scrollbar-thumb {
+  border: 3px solid transparent;
+  border-radius: 999px;
+  background: color-mix(in oklch, var(--foreground) 30%, transparent);
+  background-clip: content-box;
+}
+
+.data-grid-scroller::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in oklch, var(--foreground) 48%, transparent);
+  background-clip: content-box;
 }
 
 .data-grid-scroller :deep(.vue-recycle-scroller__item-wrapper) {