Fix scroll position for cross references links

[wallacekelly-da]

You may have noticed a very annoying behavior when clicking on links within the Ledger API reference docs. For example, if you click on the link for the GetActiveContractsResponse message, the heading for that message is behind the navbar. It is very confusing for new users.

This PR makes a small CSS tweak to address that issue. Using jQuery, it dynamically adds the section CSS class to the spans which serve as the anchor for internal links.

I did look at trying to add that CSS class to the RST source file, but without success. I have also asked on StackOverflow.

Attached are videos showing before and after.

before.mov

after.mov

[carrielaben-da]

LGTM

[yves-da]

Oh nice!

This is however a general problem on docs.daml.com, see

• Misaligned viewport when using cross-referencing using roles #722

Not sure how easy it would be to apply this fix generally 🤔

[wallacekelly-da]

Not sure how easy it would be to apply this fix generally

@yves-da, with 91f6986 I changed the jQuery selector from span[id^=com-daml-ledger-api-v] to div.section > span.

• The former selects spans whose ids start with com-daml-ledger-api-v.
• The latter selects spans that are direct children of a div with the class section. This is the pattern that Sphinx uses, as described here.

With the new selector, the issue seems to be addressed site wide.

[yves-da]

@wallacekelly-da thanks a lot for the fix 🎉

With the new selector, the issue seems to be addressed site wide.

I wasn't able to verify that for myself. However, since this is theme-only change CI didn't update docs.daml.com because of #758

So, I guess, we have to wait for another docs PR merge to check its effect 😒

[yves-da]

And indeed, after docs/2.10.0 got updated from another PR, the improvement materialized for that version. Very nice 😆