From 1daf65f71c01d0178a4158f9536318e67632c539 Mon Sep 17 00:00:00 2001
From: saberzero1 <github@emilebangma.com>
Date: Wed, 25 Sep 2024 16:49:51 +0200
Subject: [PATCH] Move max-height toggle from js to css

---
 quartz/components/scripts/explorer.inline.ts |  1 -
 quartz/components/scripts/toc.inline.ts      |  2 --
 quartz/components/styles/backlinks.scss      |  2 +-
 quartz/components/styles/explorer.scss       |  5 ++++-
 quartz/components/styles/toc.scss            | 20 +++++++++++++++-----
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index 584de6c37..33d328a6c 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/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) {
diff --git a/quartz/components/scripts/toc.inline.ts b/quartz/components/scripts/toc.inline.ts
index acc81b20d..2cfb3f921 100644
--- a/quartz/components/scripts/toc.inline.ts
+++ b/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))
   }
diff --git a/quartz/components/styles/backlinks.scss b/quartz/components/styles/backlinks.scss
index fd5970dfc..36fb6a4c6 100644
--- a/quartz/components/styles/backlinks.scss
+++ b/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;
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 0d952fd1f..ab388dce5 100644
--- a/quartz/components/styles/explorer.scss
+++ b/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;
diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss
index 87af972ef..512b01d4d 100644
--- a/quartz/components/styles/toc.scss
+++ b/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} {