From 5b500c533e407e6dc2e0dbbb374c3e51f3b15eb8 Mon Sep 17 00:00:00 2001
From: Flaminel <flm.marius@gmail.com>
Date: Mon, 20 Apr 2026 15:40:19 +0300
Subject: [PATCH] Improve the scrollbar position and visibility (#574)

---
 .../src/app/layout/shell/shell.component.html  |  4 +++-
 .../src/app/layout/shell/shell.component.scss  | 18 ++++++++++++------
 code/frontend/src/styles.scss                  |  2 +-
 code/frontend/src/styles/_scrollbar.scss       |  3 +++
 code/frontend/src/styles/_themes.scss          |  8 ++++----
 5 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/code/frontend/src/app/layout/shell/shell.component.html b/code/frontend/src/app/layout/shell/shell.component.html
index 4756c638..d9350a4a 100644
--- a/code/frontend/src/app/layout/shell/shell.component.html
+++ b/code/frontend/src/app/layout/shell/shell.component.html
@@ -22,7 +22,9 @@
     />
 
     <main class="shell__content">
-      <router-outlet />
+      <div class="shell__content-inner">
+        <router-outlet />
+      </div>
     </main>
   </div>
 </div>
diff --git a/code/frontend/src/app/layout/shell/shell.component.scss b/code/frontend/src/app/layout/shell/shell.component.scss
index 385d98e3..73a4ac70 100644
--- a/code/frontend/src/app/layout/shell/shell.component.scss
+++ b/code/frontend/src/app/layout/shell/shell.component.scss
@@ -71,16 +71,19 @@
   }
 
   &__content {
-    --content-padding: var(--space-6);
     flex: 1;
-    padding: var(--content-padding);
     overflow-y: auto;
     scroll-behavior: smooth;
+    position: relative;
+    z-index: 1;
+  }
+
+  &__content-inner {
+    --content-padding: var(--space-6);
+    padding: var(--content-padding);
     max-width: var(--content-max-width);
     width: 100%;
     margin: 0 auto;
-    position: relative;
-    z-index: 1;
 
     // Route transition: animate routed component on mount
     > :not(router-outlet) {
@@ -97,7 +100,7 @@
   }
 
   // Tablet layout
-  &--collapsed &__content {
+  &--collapsed &__content-inner {
     --content-padding: var(--space-5);
   }
 
@@ -107,7 +110,10 @@
   }
 
   &--mobile &__content {
-    --content-padding: var(--space-4);
     overflow-x: hidden;
   }
+
+  &--mobile &__content-inner {
+    --content-padding: var(--space-4);
+  }
 }
diff --git a/code/frontend/src/styles.scss b/code/frontend/src/styles.scss
index 1d711fa1..700d2318 100644
--- a/code/frontend/src/styles.scss
+++ b/code/frontend/src/styles.scss
@@ -8,7 +8,7 @@
 @use 'styles/animations';
 
 // Full-width toggle
-:root[data-full-width="true"] .shell__content {
+:root[data-full-width="true"] .shell__content-inner {
   max-width: none;
 }
 
diff --git a/code/frontend/src/styles/_scrollbar.scss b/code/frontend/src/styles/_scrollbar.scss
index 24bbcbda..3f89bf6b 100644
--- a/code/frontend/src/styles/_scrollbar.scss
+++ b/code/frontend/src/styles/_scrollbar.scss
@@ -20,8 +20,11 @@
 ::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
   border-radius: var(--radius-full);
+  border: 3px solid transparent;
+  background-clip: padding-box;
 
   &:hover {
     background: var(--scrollbar-thumb-hover);
+    background-clip: padding-box;
   }
 }
diff --git a/code/frontend/src/styles/_themes.scss b/code/frontend/src/styles/_themes.scss
index 82d3b0f5..9e85e511 100644
--- a/code/frontend/src/styles/_themes.scss
+++ b/code/frontend/src/styles/_themes.scss
@@ -61,8 +61,8 @@
 
   // Scrollbar
   --scrollbar-track:       transparent;
-  --scrollbar-thumb:       rgba(126, 87, 194, 0.2);
-  --scrollbar-thumb-hover: rgba(126, 87, 194, 0.35);
+  --scrollbar-thumb:       rgba(126, 87, 194, 0.45);
+  --scrollbar-thumb-hover: rgba(126, 87, 194, 0.70);
 
   // Dropdown
   --dropdown-bg: rgba(20, 11, 34, 0.97);
@@ -138,8 +138,8 @@
 
   // Scrollbar
   --scrollbar-track:       transparent;
-  --scrollbar-thumb:       rgba(126, 87, 194, 0.2);
-  --scrollbar-thumb-hover: rgba(126, 87, 194, 0.3);
+  --scrollbar-thumb:       rgba(126, 87, 194, 0.50);
+  --scrollbar-thumb-hover: rgba(126, 87, 194, 0.75);
 
   // Dropdown
   --dropdown-bg: rgba(255, 255, 255, 0.97);