fix: make table of contents scrollable

Author: pandinocoder

src/components/RightSidebar/RightSidebar.astro

@@ -32,6 +32,7 @@ const { editUrl, headings, langCode } = Astro.props;
 
 <style>
 	.toc {
+		display: flex;
 		grid-area: toc;
 		height: fit-content;
 		max-height: calc(100vh - var(--theme-navbar-height));
@@ -41,6 +42,11 @@ const { editUrl, headings, langCode } = Astro.props;
 		width: fit-content;
 	}
 
+	.sidebar-nav {
+		display: flex;
+		flex-direction: column;
+	}
+
 	@media (max-width: 1080px) {
 		aside.toc {
 			display: none;

src/components/RightSidebar/TableOfContents.css

@@ -1,3 +1,8 @@
 h2.heading {
 	font-size: 1.125em;
 }
+
+ul.table-of-contents {
+	overflow: auto;
+	position: relative;
+}

src/components/RightSidebar/TableOfContents.tsx

@@ -3,7 +3,7 @@ import type { FunctionalComponent } from 'preact';
 import type { MouseEvent } from 'react';
 import { unescape } from 'html-escaper';
 import {
-	useEffect, useRef, useState 
+	useEffect, useRef, useState
 } from 'preact/hooks';
 
 import './TableOfContents.css';
@@ -92,7 +92,7 @@ const TableOfContents: FunctionalComponent<Props> = ({
 			<h2 id={onThisPageID} className="heading">
 				{onThisPage}
 			</h2>
-			<ul ref={toc}>
+			<ul className="table-of-contents" ref={toc}>
 				{headings
 					.filter(({ depth }) => depth > 1 && depth < 4)
 					.map((heading) => {