From 4cf4e5c0404dada204a0b924dd6841b4c93c8d9e Mon Sep 17 00:00:00 2001
From: Aarnav Tale <git@tale.me>
Date: Sun, 26 Apr 2026 10:15:44 -0400
Subject: [PATCH] fix: use thin scrollbars that actually work

Closes HP-536.
---
 app/layout/app.tsx |  2 +-
 app/tailwind.css   | 26 ++++++++++++++++++++------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/app/layout/app.tsx b/app/layout/app.tsx
index 04f184d..0c764ef 100644
--- a/app/layout/app.tsx
+++ b/app/layout/app.tsx
@@ -111,7 +111,7 @@ export default function AppLayout({ loaderData }: Route.ComponentProps) {
         configAvailable={loaderData.configAvailable}
         user={loaderData.user}
       />
-      <main className="container mt-4 mb-24 overflow-x-hidden overscroll-contain">
+      <main className="container mt-4 mb-24 overscroll-contain">
         {!loaderData.isHealthy && (
           <StatusBanner
             className="mb-4"
diff --git a/app/tailwind.css b/app/tailwind.css
index 4ef28d7..9d8fb3f 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -55,18 +55,32 @@
   }
 }
 
+@layer base {
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--border);
+    border-radius: 5px;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+}
+
 body {
   font-optical-sizing: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-@supports (scrollbar-gutter: stable) {
-  html {
-    scrollbar-gutter: stable;
-  }
-}
-
 :root {
   --cm-bg: var(--color-white);
   --cm-fg: var(--color-mist-900);