From d84e78c667e44acd7468d722dacffde2f3df3b21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20N=C3=A4sman?= <andersn@spotify.com>
Date: Thu, 3 Mar 2022 11:38:10 +0100
Subject: [PATCH] add scroll styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Anders Näsman <andersn@spotify.com>
---
 .../techdocs/src/reader/components/Reader.tsx | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index 423e49a1e1..9ce9ad5d6d 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/plugins/techdocs/src/reader/components/Reader.tsx
@@ -447,13 +447,37 @@ export const useTechDocsReaderDom = (
               width: 16rem;
               overflow-y: auto;
               overflow-x: hidden;
+              scrollbar-color: rgb(193, 193, 193) #eee;
+              scrollbar-width: thin;
             }
             .md-sidebar .md-sidebar__scrollwrap {
-              width: calc(16rem - 16px);
+              width: calc(16rem - 10px);
             }
             .md-sidebar--secondary {
               right: ${theme.spacing(3)}px;
             }
+            .md-sidebar::-webkit-scrollbar {
+              width: 5px;
+            }
+            .md-sidebar::-webkit-scrollbar-button {
+              width: 5px;
+              height: 5px;
+            }
+            .md-sidebar::-webkit-scrollbar-track {
+              background: #eee;
+              border: 1 px solid rgb(250, 250, 250);
+              box-shadow: 0px 0px 3px #dfdfdf inset;
+              border-radius: 3px;
+            }
+            .md-sidebar::-webkit-scrollbar-thumb {
+              width: 5px;
+              background: rgb(193, 193, 193);
+              border: transparent;
+              border-radius: 3px;
+            }
+            .md-sidebar::-webkit-scrollbar-thumb:hover {
+              background: rgb(125, 125, 125);
+            }
 
             .md-content {
               max-width: calc(100% - 16rem * 2);