From aa17729008cfeb94c550c0b1b0f14aeae54a372a Mon Sep 17 00:00:00 2001
From: Alex Yaroshuk <34632190+alexyaroshuk@users.noreply.github.com>
Date: Thu, 22 Jan 2026 20:53:55 +0800
Subject: [PATCH] feat(app): add scrollbar styling to session page (#10020)

---
 packages/app/src/index.css         | 26 ++++++++++++++++++++++++++
 packages/app/src/pages/session.tsx |  2 +-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index 4edbe2440..3d7b9db7a 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -29,3 +29,29 @@
 *[data-tauri-drag-region] {
   app-region: drag;
 }
+
+.session-scroller::-webkit-scrollbar {
+  width: 10px !important;
+  height: 10px !important;
+}
+
+.session-scroller::-webkit-scrollbar-track {
+  background: transparent !important;
+  border-radius: 5px !important;
+}
+
+.session-scroller::-webkit-scrollbar-thumb {
+  background: var(--border-weak-base) !important;
+  border-radius: 5px !important;
+  border: 3px solid transparent !important;
+  background-clip: padding-box !important;
+}
+
+.session-scroller::-webkit-scrollbar-thumb:hover {
+  background: var(--border-weak-base) !important;
+}
+
+.session-scroller {
+  scrollbar-width: thin !important;
+  scrollbar-color: var(--border-weak-base) transparent !important;
+}
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
index a4ce6493d..26721bf92 100644
--- a/packages/app/src/pages/session.tsx
+++ b/packages/app/src/pages/session.tsx
@@ -1389,7 +1389,7 @@ export default function Page() {
                           autoScroll.handleScroll()
                           if (isDesktop() && autoScroll.userScrolled()) scheduleScrollSpy(e.currentTarget)
                         }}
-                        class="relative min-w-0 w-full h-full overflow-y-auto no-scrollbar"
+                        class="relative min-w-0 w-full h-full overflow-y-auto session-scroller"
                         style={{ "--session-title-height": info()?.title ? "40px" : "0px" }}
                       >
                         <Show when={info()?.title}>