fix: TOC component overflows the webpage (#209)

This commit is contained in:
saicaca
2024-10-28 18:44:06 +08:00
parent 18fcf6dd83
commit e1a98c4149
4 changed files with 32 additions and 12 deletions

View File

@@ -51,10 +51,10 @@ const maxLevel = siteConfig.toc.depth;
---
<div class:list={[className]}>
{headings.filter((heading) => heading.depth < minDepth + maxLevel).map((heading) =>
<a href={`#${heading.slug}`} class="px-2 transition flex w-full gap-2 h-9 rounded-xl items-center
hover:bg-[var(--toc-btn-hover)] active:bg-[var(--toc-btn-active)]
<a href={`#${heading.slug}`} class="px-2 flex gap-2 relative transition w-full min-h-9 rounded-xl
hover:bg-[var(--toc-btn-hover)] active:bg-[var(--toc-btn-active)] py-2
">
<div class:list={["w-5 h-5 rounded-lg text-xs flex items-center justify-center font-bold",
<div class:list={["w-5 h-5 shrink-0 rounded-lg text-xs flex items-center justify-center font-bold",
{
"bg-[var(--toc-badge-bg)] text-[var(--btn-content)]": heading.depth == minDepth,
"ml-4": heading.depth == minDepth + 1,