Fix "On this page" block on "Classes" article (#2940)

microsoft · Sep 11, 2023 · 6db303a · 6db303a
1 parent 5329034
commit 6db303a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/typescriptlang-org/src/templates/documentation.scss b/packages/typescriptlang-org/src/templates/documentation.scss
@@ -456,4 +456,9 @@
     -webkit-animation: 0.1s ease forwards;
     animation: 0.1s ease forwards;
   }
-}
+}
+
+.handbook-on-this-page-section-list {
+  overflow: auto;
+  max-height: 80vh;
+}
diff --git a/packages/typescriptlang-org/src/templates/documentation.tsx b/packages/typescriptlang-org/src/templates/documentation.tsx
@@ -85,7 +85,6 @@ const HandbookTemplate: React.FC<Props> = (props) => {
   const sidebarHeaders = post.headings?.filter(h => (h?.depth || 0) <= 3) || []
   const showSidebar = !post.frontmatter.disable_toc
   const showExperimental = post.frontmatter.experimental
-  const showSidebarHeadings = post.headings && sidebarHeaders.length <= 30
   const navigation = getDocumentationNavForLanguage(props.pageContext.lang)
   const isHandbook = post.frontmatter.handbook
   const prefix = isHandbook ? "Handbook" : "Documentation"
@@ -161,9 +160,9 @@ const HandbookTemplate: React.FC<Props> = (props) => {
             {showSidebar &&
               <aside className="handbook-toc">
                 <nav className={deprecationURL ? "deprecated" : ""}>
-                  {showSidebarHeadings && <>
+                  {<>
                     <h5>{i("handb_on_this_page")}</h5>
-                    <ul>
+                    <ul className="handbook-on-this-page-section-list">
                       {
                         sidebarHeaders.map(heading => {
                           const id = slug.slug(heading!.value, false)