Carousel option is unclickable for option with short name

[dantist1122]

Screenshots

Version

npm package v: "4.10.0"

Describe the bug

Carousel option is unclickable for option with short name

Steps to reproduce

Need to add as much option for the user to see the carousel (provide name as short as you can, one letter for ex), then there is arrows on both sides which comes on hover, and DIV with className='slider' is hovering almost first element , and if you scroll to the end right arrow div hovers last element as it is hard to click it
added colors to the div so it easier to see what I mean

Expected behavior

div should be smaller, perfectly the size as the arrow and do not block user to choose the option

Additional context

[Bug]

[johnataylor]

We will prioritize this in our upcoming release.

[corinagum]

Thanks for filing this issue. This is a fix that would need to happen in the react-film package, which is managed by @compulim and @spyip. Please feel free to file an issue above and include the link in this thread. This will remain open as a tracking ticket.

I will assign this to compulim. @cwhitten FYI.

[compulim]

Few things you could try:

1. Use idiosyncratic styling to make the flipper smaller
2. Use flow layout for suggested actions, Add suggested actions flow layout #3641 (it's currently in dev build)

Even though the flipper is smaller by 50%, it's still blocking 50% of the button.

Need design team input on how to size the flipper. It seems inevitable to have a big portion of the flipper blocking the element.