Fix sidebar flicker

[timmydoza]

Contributing to Twilio

All third party contributors acknowledge that any contributions they provide will be made under the same open source license that the open source project is provided under.

• I acknowledge that all my contributions will be made under the project's license.

Pull Request Details

JIRA link(s):

• N/A

Description

This PR fixes the flicker that is sometimes seen in the participant sidebar when the browser window just short enough to make the scrollbar appear.

Before:

After:

The flicker is caused by a CSS infinite loop. When the scrollbar appears in the sidebar, it reduces the width of the participant thumbnails, which reduces their height (to preserve aspect ratio), which reduces the length of the list, which removes the scroll bar, which increases the width of the participant thumbnails, which increases their length, and so on.

This fix adds an additional div in the sidebar (the 'innerScrollContainer'). Now, when the scrollbar appears, it reduces the size of the innerScrollContainer and not the participant thumbnails.

Note: To reproduce this issue on a Mac laptop, you must have an external mouse connected. Having an external mouse connected can change the styling of the scrollbars that appear.

Burndown

Before review

• Updated CHANGELOG.md if necessary
• Added unit tests if necessary
• Updated affected documentation
• Verified locally with npm test
• Manually sanity tested running locally
• Included screenshot as PR comment (if needed)
• Ready for review

Before merge

• Got one or more +1s
• Re-tested if necessary

[charliesantos]

Nice screenshots, explaining the issue clearly 👍