Merge pull request #2376 from mateuszbartosik/RDoc-3611

RDoc-3611 Fix scroll for TOC

Author: ppekrol

src/css/custom.css

@@ -539,8 +539,16 @@ hr {
 }
 
 /* Custom styling for TOC */
+.toc-desktop {
+    --toc-desktop-top: 110px;
+    --toc-desktop-bottom-offset: 4rem;
+    position: sticky;
+    top: var(--toc-desktop-top);
+}
+
 .table-of-contents {
-    padding: 0;
+    @apply p-0 overflow-y-auto;
+    max-height: calc(100vh - var(--toc-desktop-top) - var(--toc-desktop-bottom-offset));
 }
 
 .table-of-contents__link {
@@ -625,33 +633,38 @@ a {
 
 /* The track (progress bar) of the scrollbar */
 ::-webkit-scrollbar-track {
-    background-color: transparent;
+    background-color: transparent !important;
 }
 
 /* The entire scrollbar */
 ::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
+    width: 12px !important;
+    height: 12px !important;
 }
 
 /* The draggable scrolling handle. */
 ::-webkit-scrollbar-thumb {
-    border-radius: 8px;
-    border: 4px solid transparent;
-    background-clip: content-box;
-    background-color: oklch(0.35 0 0 / 1);
+    border-radius: 8px !important;
+    border: 4px solid transparent !important;
+    background-clip: content-box !important;
+    background-color: oklch(0.35 0 0 / 1) !important;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background-color: oklch(0.4 0 0 / 1);
+    background-color: oklch(0.4 0 0 / 1) !important;
 }
 
 ::-webkit-scrollbar-thumb:active {
-    background-color: var(--ifm-color-primary);
+    background-color: var(--ifm-color-primary) !important;
 }
 
 ::-webkit-scrollbar-corner {
-    background-color: inherit;
+    background-color: inherit !important;
+}
+
+/* Override scrollbar for sidebar menu */
+.menu.thin-scrollbar {
+    scrollbar-width: auto !important;
 }
 
 /* Custom styles for See also path collapse */

src/theme/DocItem/TOC/Desktop/index.tsx

@@ -9,7 +9,7 @@ export default function DocItemTOCDesktop(): ReactNode {
     const filteredToc = useFilteredToc(toc);
 
     return (
-        <div className="sticky top-[160px]">
+        <div className="toc-desktop">
             <p className="!mb-1 font-semibold">In this article</p>
             <TOC
                 toc={filteredToc}