Plyr: Volume bar overlaps caption menu

[Koenvh1]

Expected behaviour

The volume bar to stop before the button on the right next to it, as Chrome does:

Actual behaviour

The volume bar overlaps the first button on the right next to it (either the captions button or settings button):

Steps to reproduce

Environment

• Browser: Firefox
• Version: 83.0b9
• Operating System: Windows
• Version: 10

Console errors (if any)

Link to where the bug is happening

https://plyr.io

[dirkjf]

For a simple fix set the min-width of the input field to 0:

.plyr__volume input{ 
    min-width: 0;
}

[Koenvh1]

@dirkjf That indeed seems to fix it, thank you very much. Out of interest, do you happen to know why that fixes it?

[dirkjf]

@Koenvh1, By default, the initial value of min-width is auto, which means it will actually use the intrinsic minimum width that is automatically defined by the browser, which in the case of Firefox is bigger than the available space. This is how I believe it works, but you could also call it a bug in Firefox 😄.

[sampotts]

I'll get the _well overdue_ next version out the door this weekend.