fix: overflow list bottom gradient on toc (closes #1888)

Jacky Zhao

2025-03-31 f70e562432ca251d4c4373dfa0b02dcde11297bc

fix: overflow list bottom gradient on toc (closes #1888)

 quartz/components/TableOfContents.tsx

@@ -53,8 +53,7 @@
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </button>
        <div class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
          <OverflowList>
        <OverflowList class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
            {fileData.toc.map((tocEntry) => (
              <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
                <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
@@ -64,7 +63,6 @@
            ))}
          </OverflowList>
        </div>
      </div>
    )
  }


 quartz/components/styles/toc.scss

@@ -45,14 +45,13 @@
  }
}

.toc-content {
ul.toc-content {
  list-style: none;
  position: relative;

  & ul {
    list-style: none;
    margin: 0.5rem 0;
    padding: 0;

  list-style: none;
    & > li > a {
      color: var(--dark);
      opacity: 0.35;
@@ -63,7 +62,6 @@
        opacity: 0.75;
      }
    }
  }

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

 quartz/styles/base.scss

@@ -556,6 +556,7 @@
div:has(> .overflow) {
  display: flex;
  max-height: 100%;
  overflow-y: hidden;
}

ul.overflow,