Bug: React player causes horizontal overflow after video starts

[spenweb]

Is there an existing issue for this?

• [X] I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

mux-video-react

Which browsers are you using?

Chrome, Safari, Safari on iOS

Which operating systems are you using?

iOS

Description

The video player causes unnecessary horizontal overflow after playing the video. As a workaround, I add overflow: hidden to the player and the issue goes away.

https://github.com/muxinc/elements/assets/46385475/e17fd9dd-8fec-49fb-a155-d4f960bebba1

The test case comes straight from the documentation: https://docs.mux.com/guides/mux-player-web#example-react-implementation Here is a copy of the Code Sandbox just in case the original from the documentation is removed: https://codesandbox.io/p/sandbox/awesome-fast-89pwqp

Reduced test case

https://codesandbox.io/p/sandbox/pedantic-firefly-tgwf2x?file=%2FApp.js

Steps to reproduce

1. Press play
2. Scroll to the right
3. Notice horizontal scroll
4. Question my own understanding of CSS 🙃

Current Behavior

The video player causes unnecessary horizontal overflow after playing the video.

Expected Behavior

There should be no horizontal overflow.

Errors

No response

What version of the package are you using?

v2.3.2

[luwes]

thank you for reporting this! I can reproduce it, seems something in the media-control-bar is causing the overflow but I don't see what right away.

edit: seems the selectmenu elements are causing it

we will look into this soon

[daniel-schranz]

Hej @luwes thank you for having a look at the bug 🙌 I wonder if this was fixed since the bug with horizontal scrollbar is still a bit of a problem in our application. Thanks!

[luwes]

thanks for reminding! I repro'd again with the new player v3. it's caused by the unpositioned tooltips.

[daniel-schranz]

Lovely, thank you! 🙌