From fc630d3e09687878fc9ce813dbe7a9656659d3ef Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Fri, 6 Feb 2026 01:18:11 +0530
Subject: [PATCH 1/2] fix(ui): stabilize scrollbar width to prevent layout
 jumps

---
 app/assets/main.css                | 10 +++++++---
 app/pages/package/[...package].vue | 20 ++++++++++----------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index b89dfc052..5eb3cae55 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -155,6 +155,7 @@ html {
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   scroll-padding-top: 5rem; /* Offset for fixed header - otherwise anchor headers are cutted */
+  scrollbar-gutter: stable;
 }
 
 /*
@@ -229,6 +230,10 @@ select:focus-visible {
 }
 
 /* Scrollbar styling */
+* {
+  scrollbar-color: var(--border) var(--bg);
+}
+
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
@@ -244,14 +249,13 @@ select:focus-visible {
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #404040;
+  background: var(--border-hover);
 }
 
 /* Scrollbar styling for Firefox */
 @supports not selector(::-webkit-scrollbar) {
   * {
-    scrollbar-width: thin;
-    scrollbar-color: var(--border) var(--bg);
+    scrollbar-width: 8px;
   }
 }
 
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 4c45c7a85..ac08f83a1 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -1344,23 +1344,23 @@ onKeyStroke(
 @media (min-width: 1024px) {
   .sidebar-scroll {
     scrollbar-gutter: stable;
-    scrollbar-width: none;
+    scrollbar-width: 8px;
+    scrollbar-color: transparent transparent;
   }
 
   .sidebar-scroll::-webkit-scrollbar {
-    width: 0;
-    height: 0;
+    width: 8px;
+    height: 8px;
   }
 
-  .sidebar-scroll:hover,
-  .sidebar-scroll:focus-within {
-    scrollbar-width: auto;
+  .sidebar-scroll::-webkit-scrollbar-track,
+  .sidebar-scroll::-webkit-scrollbar-thumb {
+    background: transparent;
   }
 
-  .sidebar-scroll:hover::-webkit-scrollbar,
-  .sidebar-scroll:focus-within::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+  .sidebar-scroll:hover,
+  .sidebar-scroll:focus-within {
+    scrollbar-color: var(--border) transparent;
   }
 
   .sidebar-scroll:hover::-webkit-scrollbar-thumb,

From cd122a1d5d59eae6c9afda6cc6f03fbf6f031a6c Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Fri, 6 Feb 2026 01:36:28 +0530
Subject: [PATCH 2/2] style: use thin for firefox

---
 app/assets/main.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 5eb3cae55..d4526be11 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -255,7 +255,7 @@ select:focus-visible {
 /* Scrollbar styling for Firefox */
 @supports not selector(::-webkit-scrollbar) {
   * {
-    scrollbar-width: 8px;
+    scrollbar-width: thin;
   }
 }