Fix second to last tooltip overflowing due to our wide player controls

[absidue]

Fix second to last tooltip overflowing due to our wide player controls

Pull Request Type

• Bugfix

Related issue

• Make seekbar and player controls appear at bottom of video and take full width #6007
• closes [Bug]: Player: Tooltips get cut off with long text #6331
• closes Fix Player: Tooltips get cut off with long text #6336

Description

Fixes the second to last player tooltip overflowing.

Screenshots

Testing

Open a video and decide if it looks better.

Desktop

• OS: Windows
• OS Version: 10
• FreeTube version: eec8c7f

[kommunarr]

issue: Looks like 3rd and 4th may need it too in some locales (tested in Russian):

[absidue]

Unironically probably easier just to revert our CSS overrides, than adding language specific offsets (the amount of offset needed for Russian is probably going to look horrible for English and other locales with much smaller labels), but I know that everyone else hates shaka-player's default UI for some reason, so I guess that is not an option.

[kommunarr]

One other potential alternative is to calculate an inline-end padding for the label based on its width and position. white-space: wrap may also suffice for 3 and 4.

[absidue]

If that can be done purely in CSS sure. Keep in mind that the player can be lots of different sizes and on mobile we keep the normal layout (as squashing buttons right into the corners of a touchscreen makes them a lot harder to tap on, was a valid complaint with our old video.js player).

[efb4f5ff-1298-471a-8973-3d47447115dc]

tbh im all for reverting the overwrites if we have to patch the player all the time

[kommunarr]

This might have been missed as I added it as an edit, but white-space: wrap appears to suffice as a solution for the 3rd and 4th elements. I don't think this particular issue will recur from any future downstream changes once we address it, I'd imagine.

I also did a bit of testing with stuff like direction: rtl to try to get the titles to expand to the left rather than the right, but I wasn't able to get it to work here, so I think this should be fine.

[absidue]

white-space: wrap unfortunately doesn't work for me in full screen, it's okay in normal mode but in full screen it goes back to it's original single line display.

[kommunarr]

Given that the 3rd and 4th are only a problem in some locales, and that this is the last major item for our next major version, I'm willing to go ahead with this as its own fix for the 2nd to last tooltip.