From b5ee8b0a5330d5ae641dc30349372dce508917ed Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Thu, 8 Jul 2021 12:14:38 +0200
Subject: [PATCH] Add styles for scrollbars in long code blocks. #5467

Co-authored-by: Camila Belo <camilaibs@gmail.com>
Co-authored-by: Raghunandan Balachandran <raghunandan@spotify.com>
Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
---
 plugins/techdocs/src/reader/components/Reader.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index f80cf6cc4c..294f81378f 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/plugins/techdocs/src/reader/components/Reader.tsx
@@ -184,6 +184,17 @@ export const Reader = ({ entityId, onReady }: Props) => {
         }
         `,
       }),
+      injectCss({
+        // Properly style code blocks.
+        css: `
+        .md-typeset pre > code::-webkit-scrollbar-thumb {
+          background-color: hsla(0, 0%, 0%, 0.32);
+        }
+        .md-typeset pre > code::-webkit-scrollbar-thumb:hover {
+          background-color: hsla(0, 0%, 0%, 0.87);
+        }
+        `,
+      }),
       injectCss({
         // Admonitions and others are using SVG masks to define icons. These
         // masks are defined as CSS variables.