Graph legend items hidden in Firefox / can't scroll

[chnn]

Sometimes a few legend items will show, but the rest will be hidden out of view and not reachable by scrolling. In this case, the legend items didn't show up at all:

• explore the effectiveness of adding conditional styling in firefox for padding and scrollable lists
• iterate on the react-custom-scrollbars to remove scrollbar styling and explore padding and other styling rules to always hide native scrollbars.

---

Horizontal / No Trackbar Width

• Scrollable view does not need horizontal scrollbar
  • Solution: no need for margin-bottom
• Scrollable view does need horizontal scrollbar and still scrolls vertically
  • Note: add negative margin-bottom but adding padding-bottom doesn’t really help

Horizontal / Scrollbar Trackbar Width

• Overflow scroll always adds space for scrollbar
  • Solution: just add negative margin

Vertical / No Trackbar Width

• Scroll view does need vert scrollbar
  • Solution: adding negative margin and padding should be fine
• Scroll view does not need vert scrollbar and still scrolls horizontally
  • Note: needs verification that negative margin-right and adding padding-right solves this

Vertical / With Trackbar Width

• Overflow scroll always adds space for scrollbar
  • Solution: just add negative margin

---

• add Chrome scrollbar width/height styling when calling getScrollbarWidth() to remove check for isFirefox. This means Chrome never allocates space for a scrollbar.
• update initial rendering to always apply negative margins
• update initial rendering to only apply padding or some kind scroll spacing when getScrollbarWidth() is zero.

[OfTheDelmer]

To reproduce in Firefox

• Have a mouse plugged then the legend looks fine
• Unplug mouse and trackpad over graph... legend collapses and hides contents

[OfTheDelmer]

@alexpaxton I think this is a fancy scrollbars firefox issue relating to mouse vs trackpad on mac