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

 quartz/components/styles/toc.scss

@@ -45,23 +45,21 @@
  }
}

.toc-content {
ul.toc-content {
  list-style: none;
  position: relative;
  margin: 0.5rem 0;
  padding: 0;

  & ul {
    list-style: none;
    margin: 0.5rem 0;
    padding: 0;
    & > li > a {
      color: var(--dark);
      opacity: 0.35;
      transition:
        0.5s ease opacity,
        0.3s ease color;
      &.in-view {
        opacity: 0.75;
      }
  list-style: none;
  & > li > a {
    color: var(--dark);
    opacity: 0.35;
    transition:
      0.5s ease opacity,
      0.3s ease color;
    &.in-view {
      opacity: 0.75;
    }
  }


 quartz/styles/base.scss

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

ul.overflow,