Scrollspy is not always working

[zipymonkey]

On smaller screens sometimes the publication table of content item is not marked as active.

Steps to Duplicate

• Go to https://psul-web.psul.localhost/directory/hna2
• Make screen resolution less than 1400 pixels wide
• Scroll down.
• The Publications table of content item will not be highlighted.

[zipymonkey]

This seem to be mostly publications (maybe because there are a lot of those?)

[zipymonkey]

The bootstrap scrollspy functionality uses the IntersectionObserver to control when to add the.active class so we could tweak the rootMargin to adjust when the intersection happens.

This also might be related resizing but I don't think so.

[zipymonkey]

The PR is an improvement but not a fix. "This occurs when sections aren't large enough to take up the display space, so when a few sections are all on the page at the same time ScrollSpy defaults to the last section." We'd probably need to write a custom solution for the but I am not 100% sure the best method for this.

• Move id to the header (but this might be an issue with long sections)
• Reduce the interaction box size (can we do that?)
• Replace with scroll eventListener (less performant and very custom).
• Other?

Leaving this open for now to potentially revisit if we can enough feedback on this.