FIX: Add anchor offset for <dt> anchor links

[hoetmaaiers]

This fixes #267

[choldgraf]

I think you might have a merge resolution leftover in your code :-)

though I think the fix does work!

https://pydata-sphinx-theme--280.org.readthedocs.build/en/280/demo/api.html#numpy.linalg.matrix_power

[choldgraf]

ah yeah - looks like you need to resolve this merge

[hoetmaaiers]

ah darn, thought the yarn build solved this. Cleared the merge conflicts, ran yarn build again...

[jorisvandenbossche]

I have learned to always ignore merge conflicts in this auto-generated file, but just let the build regereate it ..

[jorisvandenbossche]

@hoetmaaiers thanks for looking into this!

Checking the demo docs, the link is now working correctly, but it seems to have some undesired side effects on the rest of the layout ..

This PR: https://pydata-sphinx-theme--280.org.readthedocs.build/en/280/demo/generated/pandas.DataFrame.drop.html#pandas.DataFrame.drop

Master: https://pydata-sphinx-theme.readthedocs.io/en/latest/demo/generated/pandas.DataFrame.drop.html#pandas.DataFrame.drop

[jorisvandenbossche]

It seems that the background-color: white; is the problem, but when removing that, the yellow box gets expanded ..

[hoetmaaiers]

This is indeed a strong issue. I assume we want to keep the highlighted box since this adds some good user experience.
Would it be possible to extend the <dt> element output?

By wrapping the dt content in an extra div (e.g. dt-content, I think the problem could be addressed:

<dt id="numpy.linalg.matrix_power">
    <div class="dt-content">
        <code class="sig-prename descclassname">numpy.linalg.</code>
        <code class="sig-name descname">matrix_power</code>
        <span class="sig-paren">(</span>
        <em class="sig-param">
            <span class="n">a</span>
        </em>,
        <em class="sig-param">
            <span class="n">n</span>
        </em>
        <span class="sig-paren">)</span>
        <a class="headerlink" href="#numpy.linalg.matrix_power" title="Permalink to this definition">¶</a>
    </div>
</dt>

[jorisvandenbossche]

This is indeed a strong issue. I assume we want to keep the highlighted box since this adds some good user experience.

Hmm, actually I am not sure it is that important. At least for doc sites like pandas, where each docstring gets its own page, I don't think it adds much value. But indeed, for pages with many docstrings under each other on a single page, highlighting the linked one can be useful.

Would it be possible to extend the

element output?

Unfortunately, I don't think this is that easy to modify the generated html (I would need to look into sphinx' autodoc extension and the directive it uses). We might be able to add a class if we override that similarly as we do for table: https://github.com/pandas-dev/pydata-sphinx-theme/blob/edc2a0bdee1411ac9f7d5950fcacb4720a7134e0/pydata_sphinx_theme/bootstrap_html_translator.py#L23, but would need to look into it to know.

[hoetmaaiers]

After some more thinking (and after a good nights rest), I solved the problem by being more specific in the css selector for

. The undesired side effects should be solved with this.

[jorisvandenbossche]

Cool, that's an easier solution, thanks!

One other question, but can be as a follow-up if needed: now we have two places in the scss code that defines very similar styling for a &::before element. Would it be possible to somehow combine those two? With a combined / generic selector (or maybe using :target, cfr https://stackoverflow.com/a/28824157/653364 / https://developer.mozilla.org/en-US/docs/Web/CSS/:target).
That might also solve anchors that are not atached to a specific header or definition list or table, see my comment about that on the issue: #267 (comment)

[hoetmaaiers]

Cool, now I learned about :target. This could indeed be an even better and more generic solution!