From 08add538a0800d6a95eeda3824632829b558974e Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sat, 23 Aug 2025 02:14:17 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style(ui):=20enhance=20table=20s?=
 =?UTF-8?q?croll=20card=20scrollbar=20visibility=20and=20appearance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Make Y-axis scrollbar visible for .table-scroll-card .semi-card-body
- Reduce scrollbar width from 6px to 4px for a more subtle appearance
- Decrease scrollbar opacity from 0.3 to 0.2 for lighter color
- Adjust hover opacity from 0.5 to 0.35 for consistent lighter theme
- Remove previous scrollbar hiding styles to improve user experience

This change improves the usability of table scroll cards by providing
visual feedback for scrollable content while maintaining a clean,
unobtrusive design aesthetic.
---
 web/src/index.css | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index 4788b28f..c08f6f00 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -694,13 +694,23 @@ html.dark .with-pastel-balls::before {
 .table-scroll-card .semi-card-body {
   flex: 1 1 auto;
   overflow-y: auto;
-
-  -ms-overflow-style: none;
-  scrollbar-width: none;
 }
 
 .table-scroll-card .semi-card-body::-webkit-scrollbar {
-  display: none;
+  width: 6px;
+}
+
+.table-scroll-card .semi-card-body::-webkit-scrollbar-thumb {
+  background: rgba(var(--semi-grey-2), 0.3);
+  border-radius: 2px;
+}
+
+.table-scroll-card .semi-card-body::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--semi-grey-2), 0.5);
+}
+
+.table-scroll-card .semi-card-body::-webkit-scrollbar-track {
+  background: transparent;
 }
 
 @media (max-width: 767px) {