Style all scrollbars to match katex thin transparent style

Removes white scrollbar backgrounds globally, using thin translucent
thumbs on transparent tracks consistent with the LaTeX formula
scrollbar styling.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

1 files changed, 32 insertions, 0 deletions

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 8bf2bbd..864f8e5 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -206,6 +206,38 @@ html, body, #root {
   background: rgba(156, 163, 175, 0.8);
 }
 
+/* Global thin scrollbar — matches katex-display style */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 5px;
+  height: 4px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: rgba(156, 163, 175, 0.4);
+  border-radius: 3px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: rgba(156, 163, 175, 0.7);
+}
+
+.dark *::-webkit-scrollbar-thumb {
+  background: rgba(156, 163, 175, 0.3);
+}
+
+.dark *::-webkit-scrollbar-thumb:hover {
+  background: rgba(156, 163, 175, 0.5);
+}
+
 /* Hide the selection box that wraps selected nodes */
 .react-flow__nodesselection-rect {
   display: none !important;