From 798c8e7f50d3c461a4bc83cf4ceafc6e0a91a4bf Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Tue, 14 Apr 2026 13:18:02 +0100
Subject: [PATCH] Fix horizontal scrollbar and style slim themed scrollbars for
 Chrome/Edge

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 vue/src/assets/styles.css | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/vue/src/assets/styles.css b/vue/src/assets/styles.css
index 37c4a70..fcc5b10 100644
--- a/vue/src/assets/styles.css
+++ b/vue/src/assets/styles.css
@@ -101,8 +101,30 @@
 /* ELEMENTS */
 body {
     margin: 0 auto;
-    width: 100vw;
+    width: 100%;
     height: 100vh;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: var(--primary) var(--bg_secondary);
+}
+
+/* Chrome/Edge scrollbar styling */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg_secondary);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--quaternary);
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--primary);
 }
 
 input {