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

quartz/components/TableOfContents.tsx

@@ -53,17 +53,15 @@ 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>
-            {fileData.toc.map((tocEntry) => (
-              <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
-                <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
-                  {tocEntry.text}
-                </a>
-              </li>
-            ))}
-          </OverflowList>
-        </div>
+        <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}>
+                {tocEntry.text}
+              </a>
+            </li>
+          ))}
+        </OverflowList>
       </div>
     )
   }

quartz/components/styles/toc.scss

@@ -45,23 +45,21 @@ button.toc-header {
   }
 }
 
-.toc-content {
+ul.toc-content {
   list-style: none;
   position: relative;
+  margin: 0.5rem 0;
+  padding: 0;
 
-  & ul {
-    list-style: none;
-    margin: 0.5rem 0;
-    padding: 0;
-    & > li > a {
-      color: var(--dark);
-      opacity: 0.35;
-      transition:
-        0.5s ease opacity,
-        0.3s ease color;
-      &.in-view {
-        opacity: 0.75;
-      }
+  list-style: none;
+  & > li > a {
+    color: var(--dark);
+    opacity: 0.35;
+    transition:
+      0.5s ease opacity,
+      0.3s ease color;
+    &.in-view {
+      opacity: 0.75;
     }
   }
 

quartz/styles/base.scss

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