+1 for that

Hello, I am interested to work on this. Do you think adding text-indent: 10px on the h3 will solve it?

visually perhaps, but the headings are not rendered as h2, h3 etc in the metabar, it's a definition list entry

see the code at

see https://nodejs.org/en/learn/test-runner/mocking

<div class="MetaBar_wrapper__Th_dl">
  <dl>
    <dt>Table of Contents</dt>
    <dd>
      <ol>
        <li>
          <a href="#when-and-not-to-mock">When and not to mock</a>
        </li>
        <li>
          <a href="#own-code">Own code</a>
        </li>
        <li>
          <a href="#why">Why</a>
        </li>
        <li>
          <a href="#why-not">Why not</a>
        </li>
        <li>
          <a href="#external-code">External code</a>
        </li>
        <li>
          <a href="#why-1">Why</a>
        </li>
        <li>
          <a href="#why-not-1">Why not</a>
        </li>
        <li>
          <a href="#external-system">External system</a>
        </li>
        <li>
          <a href="#what-to-mock">What to mock</a>
        </li>
        <li>
          <a href="#modules--units">Modules + units</a>
        </li>
        <li>
          <a href="#apis">APIs</a>
        </li>
        <li>
          <a href="#time">Time</a>
        </li>
      </ol>
    </dd>
  </dl>
</div>;

Hello @bmuenzenmeyer
can i push the changes which I had made, if it still not solved. and if it looks good, although it affects on the 'Reading Time' and 'Author' 😊

@AugustinMauroy @bmuenzenmeyer may I work on this issue?
Also, @bmuenzenmeyer , as you mentioned, that the headings are not rendered as h2 or h3... so, is it like, we've to change something more rather than just changing the font size, which won't work simply I assume 👀?
I'll try out this on my local first and then will share my approach here 👍

You can work on we don't assign issue

Hey @AugustinMauroy @bmuenzenmeyer , I've created a PR to resolve this issue. I've increased the font size of the headings, previously it was - text-sm, I've increased it to - font-[18px], could you please have a look?

#7374 and #7286 attempt to do this by simply changing the styles of every heading in the definition list.

we need a more thorough change. we need the mdx heading data (h2 vs h3) to flow through the whole data model all the way to the UI componentry, so we can visually differentiate them

@bmuenzenmeyer , could you please guide that what exactly we need here? Like as for h2 and h3 tags, do we need to make the size of the links as h2 and of the headings as h3?
Also, could you please guide something regarding the how to make the changes? I think that simply increasing the font-size is not doing the needful, so like how do we've to change the MDX in order to get this working?

I proposed a fix within #7385 - i didn't realize the heading.depth was available until I tried myself.

@bmuenzenmeyer , ig you've create a fix this issue, could you please ping me once, if I could help in this is(or any other issue) in any way?