fix(layout): grid triage and regression (#1440)

* fix(table of contents): multiple scrollbars (https://github.com/jackyzha0/quartz/issues/1388)

* fix(center): Main content mininum width (https://github.com/jackyzha0/quartz/issues/1439)

* fix(code block): Horizontal overflow fix (https://github.com/jackyzha0/quartz/issues/1438, https://github.com/jackyzha0/quartz/issues/1353)

* WIP fix for ul/ol .overflow

* Fix: restore former scrollbar behavior for overflow lists (https://github.com/jackyzha0/quartz/issues/1437)

* Fix: code block overflow-x

* fix: Table of Content overflow (https://github.com/jackyzha0/quartz/issues/1437)

* Address feedback

* 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,9 +1,10 @@
 @use "../../styles/variables.scss" as *;
 
 .backlinks {
-  @media all and not ($desktop) {
+  @media all and not ($mobile) {
     overflow-y: auto;
-    display: initial;
+    display: flex;
+    flex-direction: column;
     &:after {
       pointer-events: none;
       content: "";
@@ -17,10 +18,6 @@
       background: linear-gradient(transparent 0px, var(--light));
     }
 
-    &:has(> .overflow) {
-      position: unset;
-    }
-
     & > h3 {
       font-size: 1rem;
       margin: 0;
@@ -39,10 +36,6 @@
     }
 
     & > .overflow {
-      max-height: unset;
-      & > li:last-of-type {
-        margin-bottom: 0;
-      }
       &:after {
         display: none;
       }

quartz/components/styles/explorer.scss

@@ -1,8 +1,13 @@
 @use "../../styles/variables.scss" as *;
 
 .explorer {
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
   &.desktop-only {
-    overflow-y: auto;
+    @media all and not ($mobile) {
+      display: flex;
+    }
   }
   &:after {
     pointer-events: none;
@@ -62,7 +67,8 @@ button#explorer {
 #explorer-content {
   list-style: none;
   overflow: hidden;
-  max-height: none;
+  overflow-y: auto;
+  max-height: 100%;
   transition:
     max-height 0.35s ease,
     visibility 0s linear 0s;
@@ -70,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 {
-  overflow-y: auto;
+  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,
+      max-height 0.35s ease,
-      visibility 0s linear 0.5s;
+      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} {

quartz/styles/base.scss

@@ -250,6 +250,8 @@ a {
 
     & .center,
     & footer {
+      max-width: 100%;
+      min-width: 100%;
       margin-left: auto;
       margin-right: auto;
       @media all and ($desktop) {
@@ -416,7 +418,7 @@ pre {
     counter-increment: line 0;
     display: grid;
     padding: 0.5rem 0;
-    overflow-x: scroll;
+    overflow-x: auto;
 
     & [data-highlighted-chars] {
       background-color: var(--highlight);
@@ -535,12 +537,15 @@ video {
 }
 
 div:has(> .overflow) {
+  display: flex;
   position: relative;
+  overflow-y: auto;
+  max-height: 100%;
 }
 
 ul.overflow,
 ol.overflow {
-  max-height: 400;
+  max-height: 100%;
   overflow-y: auto;
 
   // clearfix
@@ -550,7 +555,6 @@ ol.overflow {
   & > li:last-of-type {
     margin-bottom: 30px;
   }
-
   &:after {
     pointer-events: none;
     content: "";