feat(app): add scrollbar styling to session page (#10020)

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;
+}

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}>