Card Carousel Right '>' Button Doesn't Always Disappear At End Of Carousel

Please view our Technical Support Guide before filing a new issue.

Screenshots

Version

I am using version 4.13.0 via cdn: <script src="https://cdn.botframework.com/botframework-webchat/4.13.0/webchat.js"></script>

To determine what version of Web Chat you are running, open your browser's development tools, and paste the following line of code into the console.

[].map.call(document.head.querySelectorAll('meta[name^="botframework-"]'), function (meta) { return meta.outerHTML; }).join('\n')

If you are using Web Chat outside of a browser, please specify your hosting environment. For example, React Native on iOS, Cordova on Android, SharePoint, PowerApps, etc.

Describe the bug

Depending on the screen size (i.e. zoomed in/out on a browser tab or on various phone screens) the '>' right flippe buttonr in the card carousel will not auto hide when a user gets to the end of the carousel.

In Webchat.js file there is a method that adds or removes the following class: '.react-film__main__slider--hide'

Depending on the size of the screen (and typically not until after a y-axis scrollbar becomes present) the class does not get added. I presume this is because the padding/margin on the end of the react-film carousel isn't close enough to trigger the event adding the class.

Steps to reproduce

1. Go to a chatbot with a carousel of cards wide enough to allow for the '>' right flipper button to appear.
2. Go to the last card on the right.
3. Zoom in and out on the browser screen

Expected behavior

There will be differences in behavior of '>' right flipper button appearing when it should not be, based on the size of the screen, which can also lead to the last card in the carousel to appear that it is bouncing back when the user reaches the end and hits the '>' right flipper button.

Additional context

[Bug]