Fourth-level headings missing one level of indentation

[Ellery]

I have encountered an issue while using the DiscoTOC component:
The fourth-level headings in the right-hand scrollbar appear to be missing one level of indentation compared to the third-level headings.

I have already reviewed the original text and have not found any syntax errors.

Could someone please explain the possible reason behind this? Additionally, I am wondering if there is a solution available for this issue?

[Canapin (Coin-coin le Canapin)]

I think it’s on purpose not to shrink too much titles in the table of content when there is too much indenting.

The easiest way to achieve incremental padding would be to target either the <li> or <a> inside (using their classes as they have classes related to their heading level) and add a padding-left.

[Ellery]

Thank you for your response!

However, wouldn’t implementing this solution require modifying the HTML code? Could you provide more specific guidance on addressing this issue?

[Canapin (Coin-coin le Canapin)]

First, titles from <h3> to <h5> can’t be collapsed in the TOC. A change to the component should be made to allow this behavior. <h6> are ignored by the component.

But since you’re only talking about nesting, this SCSS should be enough for what you want:

.d-toc-main #d-toc li.d-toc-item {
    .d-toc-h4 {
        padding-left: 1.25em;
    }
    .d-toc-h5 {        
        padding-left: 2em;
    }
}