chore(css): style tweaks for overflow

Jacky Zhao

2025-04-05 ee8c1dc96803fcd189d439080713b8a98616a40f

chore(css): style tweaks for overflow

 quartz/components/scripts/popover.inline.ts

@@ -12,7 +12,7 @@
  clearActivePopover()

  const link = this
  link.id = `backlink-${randomIdNonSecure()}`
  const id = randomIdNonSecure()
  if (link.dataset.noPopover === "true") {
    return
  }
@@ -27,8 +27,8 @@
    })
  }

  const prevPopoverElement = document.getElementById(`popover-${link.id.split("-")[1]}`)
  const hasAlreadyBeenFetched = () => !!prevPopoverElement
  const prevPopoverElement = document.getElementById(`popover-${id}`)
  const hasAlreadyBeenFetched = () => !!document.getElementById(`popover-${id}`)

  // dont refetch if there's already a popover
  if (hasAlreadyBeenFetched()) {
@@ -91,7 +91,7 @@
      normalizeRelativeURLs(html, targetUrl)
      // prepend all IDs inside popovers to prevent duplicates
      html.querySelectorAll("[id]").forEach((el) => {
        const targetID = `popover-${el.id}`
        const targetID = `popover-internal-${el.id}`
        el.id = targetID
      })
      const elts = [...html.getElementsByClassName("popover-hint")]
@@ -101,12 +101,12 @@
  }

  setPosition(popoverElement)
  popoverElement.id = `popover-${link.id.split("-")[1]}`
  popoverElement?.classList.add("active-popover")
  popoverElement.id = `popover-${id}`
  popoverElement.classList.add("active-popover")
  document.body.appendChild(popoverElement)

  if (hash !== "") {
    const targetAnchor = hash.startsWith("#popover") ? hash : `#popover-${hash.slice(1)}`
    const targetAnchor = `#popover-internal-${hash.slice(1)}`
    const heading = popoverInner.querySelector(targetAnchor) as HTMLElement | null
    if (heading) {
      // leave ~12px of buffer when scrolling to a heading

 quartz/components/styles/backlinks.scss

@@ -8,11 +8,11 @@
    margin: 0;
  }

  & > ul {
  & > ul.overflow {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    height: 6rem;
    max-height: calc(100% - 2rem);
    overscroll-behavior: contain;

    & > li {

 quartz/components/styles/toc.scss

@@ -3,18 +3,11 @@
.toc {
  display: flex;
  flex-direction: column;

  overflow-y: hidden;
  min-height: 1.2rem;
  flex: 0 1 auto;
  min-height: 1.4rem;
  flex: 0 0.5 auto;
  &:has(button.toc-header.collapsed) {
    flex: 0 1 1.2rem;
  }
}

@media all and not ($mobile) {
  .toc-header {
    display: flex;
    flex: 0 1 1.4rem;
  }
}

@@ -45,15 +38,15 @@
  }
}

ul.toc-content {
ul.toc-content.overflow {
  list-style: none;
  position: relative;
  margin: 0.5rem 0;
  padding: 0;
  height: 5rem;
  max-height: calc(100% - 2rem);
  overscroll-behavior: contain;

  list-style: none;

  & > li > a {
    color: var(--dark);
    opacity: 0.35;

 quartz/styles/base.scss

@@ -238,6 +238,7 @@
        padding: 0;
        & > * {
          flex: 1;
          max-height: 24rem;
        }
        & > .toc {
          display: none;
@@ -577,7 +578,7 @@
  clear: both;

  & > li.overflow-end {
    height: 1rem;
    height: 0.5rem;
    margin: 0;
  }