From 6cccbf5f7a50b3438cbc8ce203b92e4cd73244d3 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Thu, 12 Nov 2020 14:45:47 +0300
Subject: [PATCH] fix(v2): add thin scrollbar to proper element in TOC (#3726)

---
 packages/docusaurus-theme-classic/src/theme/TOC/index.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/TOC/index.tsx b/packages/docusaurus-theme-classic/src/theme/TOC/index.tsx
index 62cccf28ab..190f51ea59 100644
--- a/packages/docusaurus-theme-classic/src/theme/TOC/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/TOC/index.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-
+import clsx from 'clsx';
 import useTOCHighlight from '@theme/hooks/useTOCHighlight';
 import type {TOCProps} from '@theme/TOC';
 import styles from './styles.module.css';
@@ -23,9 +23,7 @@ function Headings({headings, isChild}: TOCProps & {isChild?: boolean}) {
   return (
     <ul
       className={
-        isChild
-          ? ''
-          : 'table-of-contents table-of-contents__left-border thin-scrollbar'
+        isChild ? '' : 'table-of-contents table-of-contents__left-border'
       }>
       {headings.map((heading) => (
         <li key={heading.id}>
@@ -46,7 +44,7 @@ function Headings({headings, isChild}: TOCProps & {isChild?: boolean}) {
 function TOC({headings}: TOCProps): JSX.Element {
   useTOCHighlight(LINK_CLASS_NAME, ACTIVE_LINK_CLASS_NAME, TOP_OFFSET);
   return (
-    <div className={styles.tableOfContents}>
+    <div className={clsx(styles.tableOfContents, 'thin-scrollbar')}>
       <Headings headings={headings} />
     </div>
   );