From 89f9f0450447c76c86012e6df15682e48cbff516 Mon Sep 17 00:00:00 2001
From: eewing <eewing@cardoza.construction>
Date: Tue, 17 Mar 2026 09:21:47 -0500
Subject: [PATCH] Add custom scrollbar styles for app shell page view

Implemented Shadcn-style scrollbars for scrollable areas in the app shell. Adjusted scrollbar width and colors for both light and dark themes to enhance user experience and visual consistency.
---
 src/routes/layout.css | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/routes/layout.css b/src/routes/layout.css
index 39ac082d..f0673f88 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -162,3 +162,28 @@
 }
 
 /* Inputs inherit font size so they scale with system text size */
+
+/* Shadcn-style scrollbars for scrollable areas */
+.app-shell .page-view {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(240 3.7% 15.9%) transparent;
+}
+
+.app-shell .page-view::-webkit-scrollbar {
+  width: 8px;
+}
+
+.app-shell .page-view::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.app-shell .page-view::-webkit-scrollbar-thumb {
+  background-color: hsl(240 3.7% 15.9%);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+.dark .app-shell .page-view::-webkit-scrollbar-thumb {
+  background-color: hsl(240 3.7% 30%);
+}