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

Emile Bangma

2024-09-25 a7a0dcad22876b8e4e0185b8c4b4d8131be965b1

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 @@
  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 @@
  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 @@
    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 @@
#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 @@
  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 @@
#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 @@
      }
    }
  }
  > ul.overflow {
    max-height: none;
  }

  @for $i from 0 through 6 {
    & .depth-#{$i} {

 quartz/styles/base.scss

@@ -250,6 +250,8 @@

    & .center,
    & footer {
      max-width: 100%;
      min-width: 100%;
      margin-left: auto;
      margin-right: auto;
      @media all and ($desktop) {
@@ -416,7 +418,7 @@
    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 @@
}

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 @@
  & > li:last-of-type {
    margin-bottom: 30px;
  }

  &:after {
    pointer-events: none;
    content: "";