fix: use thin scrollbars that actually work

Closes HP-536.

Author: tale

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"

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);