fix: overflow list bottom gradient on toc (closes #1888)

quartz/components/TableOfContents.tsx

@@ -53,8 +53,7 @@ export default ((opts?: Partial<Options>) => {
             <polyline points="6 9 12 15 18 9"></polyline>
           </svg>
         </button>
-        <div class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
-          <OverflowList>
+        <OverflowList class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
           {fileData.toc.map((tocEntry) => (
             <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
               <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
@@ -64,7 +63,6 @@ export default ((opts?: Partial<Options>) => {
           ))}
         </OverflowList>
       </div>
-      </div>
     )
   }
 

quartz/components/styles/toc.scss

@@ -45,14 +45,13 @@ button.toc-header {
   }
 }
 
-.toc-content {
+ul.toc-content {
   list-style: none;
   position: relative;
-
-  & ul {
-    list-style: none;
   margin: 0.5rem 0;
   padding: 0;
+
+  list-style: none;
   & > li > a {
     color: var(--dark);
     opacity: 0.35;
@@ -63,7 +62,6 @@ button.toc-header {
       opacity: 0.75;
     }
   }
-  }
 
   @for $i from 0 through 6 {
     & .depth-#{$i} {

quartz/styles/base.scss

@@ -556,6 +556,7 @@ video {
 div:has(> .overflow) {
   display: flex;
   max-height: 100%;
+  overflow-y: hidden;
 }
 
 ul.overflow,