Improve the scrollbar position and visibility (#574)

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>

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);
+  }
 }

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;
 }
 

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;
   }
 }

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);