UI improvement: fix overflow menu overlapping other controls

[kamalmulani]

Description

some UI improvement for the player:

1. The range element is a special input element so changed cursor changes to pointer when it hovers over any range input element.
2. fixed overflow menu overlapping other controls issue

Fixes #3217

Screenshots (optional)

cursor changes to pointer on range elements.

fixed overflow menu overlapping other controls issue

Type of change

• Bug fix (non-breaking change which fixes an issue)

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• New and existing unit tests pass locally with my changes

[michellezhuogg]

Any specific reason we need to change the "right" property?

[kamalmulani]

the right property is set to static 15px, so I changed the right property to % based relative measurements (as relative measurements are more preferred over static ones) , this way the right property adapts to the container size in normal as well as fullscreen mode.

[michellezhuogg]

We'll need to double check how it looks on different sized screens (shrink and grow the browser window, and try device emulation in Chrome, and also on large screens like TV). If we have it in px, most likely means that it wasn't working with % for one of those use cases.

[kamalmulani]

I tested these changes on the browser in all possible screen sizes, also tried device emulation on chrome ( both small and large screen sizes ) and it works perfectly fine in all cases without any issue.
for surety, you can do a check for these changes from your side.

[michellezhuogg]

Thank you for testing!

[michellezhuogg]

Any specific reason we have to remove this style? It might break the current behavior with no seekbar.
The most ideal solution might be to use the flex layout for the overflow menu to let it float above the "shaka-controls-button-panel", however it requires further investigation to make sure nothing would be broken.

[kamalmulani]

this style was actually present because the bottom property was set to static 30px which had to be changed when there was no seekbar , but now as I changed the bottom property to the 4em (relative measurement) it is not needed as it automatically gives required margin from bottom making sure it is above the controls even without the seekbar, I verified that the change doesn't break the current behavior. below are the images of UI without seek bar.

before these changes :

after these changes :

And you are right, the optimal and permanent solution would be to use a flex layout for the overflow menu to let it float above the control panel, but these changes should work as a good temporary solution.

[michellezhuogg]

Thank you for verifying that!
Would you like to try out the flex layout approach, since it's not an urgent fix? We can come back to the current approach if it doesn't work.

[kamalmulani]

Sure sir, I'll try to implement the flex layout and see if it works.

[joeyparrish]

@prophet-x, would you please split the PR into multiple? It would be easier to review and verify the CSS changes on various browsers and platforms if you would keep each PR more focused. For example, in this PR today it appears that you:

1. Fix the pointer style
2. Fix the positioning of the overflow menu
3. Change fixed values to percentages and ems

If those were split up into separate PRs, it would be easier to review, test, and approve some of them more quickly.

Thanks!

[kamalmulani]

sure sir, I'll do it.