From d495b0f423ebaf6c6d33e3950ae7cb7a61eae25c Mon Sep 17 00:00:00 2001
From: lzt404 <2596933790@qq.com>
Date: Tue, 15 Sep 2026 17:13:52 +0800
Subject: [PATCH] feat(styles): enhance scrollbar styling for usage table

---
 src/styles.css | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/styles.css b/src/styles.css
index e20c959..20467fc 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -8877,11 +8877,42 @@ textarea:focus-visible {
 .usage-table-top-scrollbar {
   overflow-x: auto;
   overflow-y: hidden;
-  height: 16px;
+  flex: 0 0 18px;
+  height: 18px;
+  min-height: 18px;
   border-bottom: 1px solid var(--theme-e3e1db);
   background: var(--theme-fffdf8);
 }
 
+.usage-table-top-scrollbar::-webkit-scrollbar {
+  height: 16px;
+}
+
+.usage-table-top-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.usage-table-top-scrollbar::-webkit-scrollbar-thumb {
+  min-width: 64px;
+  /* Keep a slim thumb inside a larger draggable area. */
+  border: 5px solid transparent;
+  border-radius: 999px;
+  background: var(--theme-8a847c);
+  background-clip: padding-box;
+  cursor: grab;
+}
+
+.usage-table-top-scrollbar::-webkit-scrollbar-thumb:hover {
+  border-width: 4px 5px;
+  background-color: var(--theme-7a746c);
+}
+
+.usage-table-top-scrollbar::-webkit-scrollbar-thumb:active {
+  border-width: 4px 5px;
+  background-color: var(--theme-7a746c);
+  cursor: grabbing;
+}
+
 .usage-table-top-scrollbar.is-hidden {
   display: none;
 }