Move max-height toggle from js to css

quartz/components/scripts/explorer.inline.ts

@@ -25,7 +25,6 @@ function toggleExplorer(this: HTMLElement) {
   if (!content) return
 
   content.classList.toggle("collapsed")
-  content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
 }
 
 function toggleFolder(evt: MouseEvent) {

quartz/components/scripts/toc.inline.ts

@@ -23,7 +23,6 @@ function toggleToc(this: HTMLElement) {
   const content = this.nextElementSibling as HTMLElement | undefined
   if (!content) return
   content.classList.toggle("collapsed")
-  content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
 }
 
 function setupToc() {
@@ -32,7 +31,6 @@ function setupToc() {
     const collapsed = toc.classList.contains("collapsed")
     const content = toc.nextElementSibling as HTMLElement | undefined
     if (!content) return
-    content.style.maxHeight = collapsed ? "0px" : content.scrollHeight + "px"
     toc.addEventListener("click", toggleToc)
     window.addCleanup(() => toc.removeEventListener("click", toggleToc))
   }

quartz/components/styles/backlinks.scss

@@ -1,7 +1,7 @@
 @use "../../styles/variables.scss" as *;
 
 .backlinks {
-  @media all and not ($desktop) {
+  @media all and not ($mobile) {
     overflow-y: auto;
     display: flex;
     flex-direction: column;

quartz/components/styles/explorer.scss

@@ -5,7 +5,9 @@
   flex-direction: column;
   overflow-y: hidden;
   &.desktop-only {
-    display: flex;
+    @media all and not ($mobile) {
+      display: flex;
+    }
   }
   &:after {
     pointer-events: none;
@@ -74,6 +76,7 @@ button#explorer {
   visibility: visible;
 
   &.collapsed {
+    max-height: 0;
     transition:
       max-height 0.35s ease,
       visibility 0s linear 0.35s;

quartz/components/styles/toc.scss

@@ -1,5 +1,10 @@
 .toc {
-  max-height: 40%;
+  display: flex;
+  flex-direction: column;
+  &.desktop-only {
+    display: flex;
+    max-height: 40%;
+  }
 }
 
 button#toc {
@@ -32,17 +37,19 @@ button#toc {
 #toc-content {
   list-style: none;
   overflow: hidden;
-  max-height: none;
+  overflow-y: auto;
+  max-height: 100%;
   transition:
-    max-height 0.5s ease,
+    max-height 0.35s ease,
     visibility 0s linear 0s;
   position: relative;
   visibility: visible;
 
   &.collapsed {
+    max-height: 0;
     transition:
-      max-height 0.5s ease,
-      visibility 0s linear 0.5s;
+      max-height 0.35s ease,
+      visibility 0s linear 0.35s;
     visibility: hidden;
   }
 
@@ -65,6 +72,9 @@ button#toc {
       }
     }
   }
+  > ul.overflow {
+    max-height: none;
+  }
 
   @for $i from 0 through 6 {
     & .depth-#{$i} {