Legend sizing does not account for scrollbar width

[nickofthyme]

Describe the bug
The Right or Left legend positions do not account for the browser scrollbar. Particularly, with short legend names.

Only on Chrome and Safari, not FireFox.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://elastic.github.io/elastic-charts/?path=/story/small-multiples-alpha--grid-lines&knob-Show Legend=true
2. Toggle the legend with the provided knob
3. Notice the legend item labels are truncated due to the scroll bar.

Expected behavior
Somehow account for the scrollbar width when legend values exceed the height of the legend container.

Screenshots

When the legend container is set to overflow-x: hidden the issue goes away

Kibana Cross Issues
elastic/kibana#94596

[markov00]

🎉 This issue has been resolved in version 24.6.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀

[nickofthyme]

Still an issue, see elastic/kibana#94596

[nickofthyme]

🎉 This issue has been resolved in version 28.1.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀

[nickofthyme]

This issue was found to still remain in Windows browsers.

[nickofthyme]

This issue was caused by kibana overriding legend :focus styles with Amsterdam theme which confilcts with us not using the Amsterdam theme. Closing in favor of #1461.