From 8db58d36dc565215fad54e27f7ed4652418b924c Mon Sep 17 00:00:00 2001
From: Sam Chau <schau22@pm.me>
Date: Wed, 28 Jan 2026 07:53:29 +1030
Subject: [PATCH] style: add custom overlay scrollbars because chromium default
 is ugly!!!!!!!

---
 src/app.css | 32 ++++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/app.css b/src/app.css
index c5b0581..407c936 100644
--- a/src/app.css
+++ b/src/app.css
@@ -383,21 +383,41 @@
 		}
 	}
 
-	/* Custom scrollbar for Chromium and Safari */
+	/* Overlay scrollbars - never reserve space, float on top like Firefox */
+	* {
+		overflow: overlay; /* Chromium: float on top, no layout space */
+		scrollbar-width: thin;
+		scrollbar-color: rgba(163, 163, 163, 0.5) transparent;
+	}
+
+	.dark * {
+		scrollbar-color: rgba(82, 82, 82, 0.6) transparent;
+	}
+
+	/* Webkit (Chrome/Safari) */
 	::-webkit-scrollbar {
-		width: 12px;
-		height: 12px;
+		width: 8px;
+		height: 8px;
 	}
 
 	::-webkit-scrollbar-track {
-		@apply bg-neutral-100 dark:bg-neutral-900;
+		background: transparent;
 	}
 
 	::-webkit-scrollbar-thumb {
-		@apply rounded bg-neutral-300 dark:bg-neutral-700;
+		background-color: rgba(163, 163, 163, 0.5);
+		border-radius: 9999px;
 	}
 
 	::-webkit-scrollbar-thumb:hover {
-		@apply bg-neutral-400 dark:bg-neutral-600;
+		background-color: rgba(163, 163, 163, 0.8);
+	}
+
+	.dark ::-webkit-scrollbar-thumb {
+		background-color: rgba(82, 82, 82, 0.6);
+	}
+
+	.dark ::-webkit-scrollbar-thumb:hover {
+		background-color: rgba(82, 82, 82, 0.9);
 	}
 }