This can be done by adding the following CSS (tested on Firefox and Chromium):

.rst-content a.headerlink {
  display: inline;
}

As no space is present between the headerlink and the previous word, it forces them to be wrapped together.

As no space is present between the headerlink and the previous word

Ah yeah, perhaps we can add a   - I guess this is exactly what it is meant for :)

As no space is present between the headerlink and the previous word

Ah yeah, perhaps we can add a   - I guess this is exactly what it is meant for :)

Not really, the problem comes from the fact that currently the .headerlink is set to display: inline-block, so it will always first wrap at the block boundary. With no CSS at all, the behaviour would be the expected one, as the <a> is not separated from the previous word with any space and its default display mode is inline.
Using a &nbsp here will only add complexity, adding space with margin-left as currently done seems a better idea.

I never used SASS but it seems display: inline (or display: initial) can be added here:

Roger! Thanks for the wonderful explanation!

If you would like to submit a PR, I can build the SASS and push to your PR 👍 Alternatively, there is a Makefile in our project with some Docker build stuff.

If you would like to submit a PR, I can build the SASS and push to your PR

I think that I prefer this option. I will make the PR right now.