Sharing button not clickable at the bottom of charts at the bottom right of the viewport

[mlbrgl]

reported by @paarriagadap on slack

Description

Sharing button in the bottom right corner of charts not clickable when the chart is at the bottom of the viewport. This comes from the "Jobs" and "Feedback" buttons shadowing it, despite visually disappearing on scroll.

Expected behaviour

Sharing button clickable as usual.

Steps to reproduce

1. Go to https://ourworldindata.org/illicit-drug-use#interactive-charts-on-opioids-cocaine-cannabis-and-illicit-drugs
2. Resize your browser window to ~ 1440px
3. Bring the bottom of the chart to the bottom of the viewport
4. Try and click on the sharing icon: it doesn't get a cursor and is not clickable.

Screenshots

[larsyencken]

@mlbrgl Do you have a theory on why it's happening?

[mlbrgl]

@larsyencken I think there are two issues here:

• there is a wrapper (.site-tools) and its content. When we scroll down, the content is translated down but the wrapper is still in the same place and captures clicks
• the content is not translated fully out of the view so those buttons continue to capture clicks (but the result - the popups - is not visible since the opacity has been reduced to 0). Hiding through opacity is done for the aesthetic of the transition, and is not an issue in absolute terms, but compounds the problem here

[ikesau]

I think adding a mouse-events none to the container when it disappears should fix this.

edit: nvm, it's the site-tools element which is occluding the buttons, and it's not a one-liner to fix because that element needs to exist to mount the hide-wrapper div into. But if we update the listener to apply the hide class to site-tools instead, it should work.