Add custom scroll bar styles

components/Header.module.css

@@ -33,8 +33,7 @@
 
 .sideBarShown {
   composes: sideBarCommon;
-  /* -1% to hide slight line tip showing in some browsers */
-  transform: translateX(-1%);
+  transform: translateX(0);
 }
 
 .sideBarHidden {

pages/_app.css

@@ -2,7 +2,8 @@ html {
   scroll-behavior: smooth;
 }
 
-html, body {
+html,
+body {
   overflow-x: hidden;
 }
 
@@ -150,4 +151,18 @@ a:hover {
     --card-background: var(--dark--card-background);
     --label: var(--dark--label);
   }
+}
+
+body::-webkit-scrollbar {
+  width: 1em;
+}
+
+body::-webkit-scrollbar-track {
+  /* box-shadow: inset 0 0 6px var(--primary-background); */
+  background: var(--card-background);
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: var(--tertiary-background);
+  /* outline: 1px solid var(--primary-accent); */
 }