From 5655d00a328168958a37fcec7bc2fa885f033f98 Mon Sep 17 00:00:00 2001
From: Vansh <vanshmorwani1@gmail.com>
Date: Fri, 3 Apr 2026 19:31:13 +0530
Subject: [PATCH] fix(styles): prevent scrollbar width shift when toggling
 themes

Previously, dark mode had explicit scrollbar styling with 10px width, while
light mode relied on the browser's default scrollbar width. This caused the
page content to shift horizontally when users switched between themes.

Add scrollbar styling to light mode that matches dark mode's configuration,
ensuring consistent scrollbar width (10px) across both themes. This prevents
the layout shift and provides a smoother theme switching experience.
---
 src/styles.scss | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/src/styles.scss b/src/styles.scss
index 5e565ab709..1c1b2c72a7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -62,6 +62,47 @@ html[mode='dark'] {
 html:not([mode='dark']):not([mode='light']),
 html[mode='light'] {
   @extend .light-mode;
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: #c0c0c0 !important;
+    border-radius: 6px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: #a0a0a0;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--background-3dp);
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: var(--background-3dp);
+  }
+
+  .app-menu {
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+  }
+
+  .app-menu:not(:hover) {
+    &::-webkit-scrollbar-thumb {
+      background: var(--menu-background) !important;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: var(--menu-background);
+    }
+
+    &::-webkit-scrollbar-corner {
+      background: var(--menu-background);
+    }
+  }
 }
 
 body {